Ограничить текст шириной родственного изображения / автоматической ширины в CSS - PullRequest
Новая
       14

Ограничить текст шириной родственного изображения / автоматической ширины в CSS

21 голосов
/ 06 марта 2009

Я по сути пытаюсь создать версию элемента "figure" (готовится к выпуску в HTML5), в результате чего у меня есть изображение с коротким описанием под ним.

Однако я хочу ограничить ширину всего этого элемента шириной изображения, чтобы текст был не шире, чем изображение (при необходимости перенос в несколько строк).

Основной HTML: 

<div class="figure">
<img src="..." alt="..." width="..." height="..." /><br />
A description for the image
</div>

Я хорошо разбираюсь в CSS, но я не могу придумать ни одного чистого решения CSS, без добавления style="width:100px" к div, чтобы соответствовать ширине изображения.

Обновление : После небольшого поиска и размышлений лучший способ, похоже, заключается в использовании встроенной ширины в div. Я сохраню атрибут width на изображении, если я хочу, чтобы div был немного шире, чем изображение (например, для размещения более длинного заголовка).

Этот подход также означает, что у меня может быть два изображения рядом с подписью ниже. Если у меня есть набор изображений одинакового размера, я, конечно, могу добавить дополнительный стиль к каждому div.

Спасибо всем, кто ответил!

Ответы [ 5 ]

16 голосов
/ 19 августа 2014

Это также может быть выполнено с использованием 'display: table-caption' для подписи следующим образом:

HTML 

<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>

1007 * стилевой * .wrapper { display: table; } .caption { display: table-caption; caption-side: bottom; } Этот блок также может быть перемещен слева направо от другого текста. Я проверял это в IE8 +. Вот пример JSBin: http://jsbin.com/xiyevovelixu/1

7 голосов
/ 06 марта 2009

Для автоматической настройки ширины изображения можно использовать 

.figure {
  display: table;
  width: 1px;
}

Это заставляет div вести себя как таблица (не поддерживается в Internet Explorer). Или вы можете использовать таблицу вместо div. Я не думаю, что есть другой способ установить ширину автоматически.

Редактировать : Самый простой способ - забыть об автоматической ширине и установить ее вручную. Если это действительно необходимо, вы можете использовать JavaScript или таблицу. В этом случае использование таблицы не так страшно, потому что вы обращаетесь к ограничению HTML-версии. В случае сценариев на стороне сервера вы также можете установить ширину при создании страницы.

2 голосов
/ 06 марта 2009

У меня была та же проблема, и после прочтения этот решил использовать встроенный стиль для окружающего элемента. Кажется, лучшее решение по сравнению с использованием таблицы для меня.

2 голосов
/ 06 марта 2009

стилевой 

div.figure img,
div.figure div.caption {
    width: 100%;
}
div.figure div {
    overflow: hidden;
    white-space: nowrap;
}

примечание: чтобы включить перенос, просто удалите последнюю строку CSS

HTML 

<div class="figure" style="width:150px;">
    <img src="logo.png" alt="logo" />
    <div class="caption">A description for the image</div>
</div>

Я проверил его в Chrome, Firefox и IE7, и он хорошо выглядит во всех трех. Я понимаю, что это ширина на div, а не на img, но, по крайней мере, вам нужно установить ширину только в одном месте. Если не считать выражений css (только для IE), я не вижу способа установить ширину внешнего элемента div в ширину первого дочернего элемента.

0 голосов
/ 06 марта 2009

Вы можете использовать решение display:table для всех других браузеров и Поведение CSS для Internet Explorer.

...