Как сделать резиновую картинку на одной линии с текстом?

264

26 ноября 2016, 18:44

При этом текст не должен не должен обтекать картинку как при использовании float.

Cделал при помощи CSS таблиц: https://jsfiddle.net/5p1fLuop/

Нормально или можно упростить?

Answer 1

Можно не менять теги, всё сделать через стили.

img { 
  max-width: 100%; 
  display: table-cell; 
} 
 
#a { 
  display: table; 
  margin: 0 auto; 
  table-layout: fixed; 
  text-align: center; 
} 
 
#b { 
  display: block; 
  white-space: nowrap; 
}

<div id='a'> 
    <img src='..path/img.jpg'> 
    <div id='b'>Привет мистер бобёр!</div> 
</div>

Answer 2

Примените элемент figcaption из стандарта ХТМЛ5:

<figure style=text-align:center>
    <img style=max-width:100% src='http://webmandry.com/images/stories/2013/03/013-biver/3.jpg'>
    <figcaption style=font-family:Verdana>Привет мистер бобёр!</figcaption>
</figure>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Как сделать так, что бы элементы дрыгались так же

Добрый день, подскажите, пожалуйста, как можно сделать так же как на этом сайте (http://enjoymeru/box/), в исходниках смотрел, что они делают это при помощи...

352

CSS

Поле с выпадающим списком select. Изменить цвет текста выделенного option

Добрый день, друзья! Имеется поле со списком selectОдин option сделан disabled (так как поле со списком не имеет placeholder) и hidden (чтобы не был виден в списке)

444

CSS