GearHead
@GearHead
Fullstack разработчик и предприниматель

Красивая вёрстка <figure>

Боюсь, что окажется повтором, или что ответ на поверхности, но никак не могу придумать решение. Хочется сделать красивые, как в учебниках, сноски изображений, ещё и в семантической вёрстке, и без Javascript.
Задача: организовать с помощью CSS
<figure>
  <img />
  <figcaption>
    Some inline text or <div>block elements</div>
  </figcaption>
</figure>

так, чтобы figcaption никогда не был шире, чем изображение. Изображение — max-width: 640px. Figure — float: left.

Отображение парсится RSS-ридером, поэтому изображения могут быть самых разных размеров и ratio.

Пример того, что надо исправить, можно глянуть на librapost.ru/rss-items/4e3a740733d21610b8004a02, там правда figure без float'а.
  • Вопрос задан
  • 2716 просмотров
Решения вопроса 1
Smileek
@Smileek
figure {width:1%; display:table}

И ведь решается на чистом CSS! :)
jsfiddle.net/XML6b/
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы