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

StackOverflow https://stackoverflow.com/questions/617386

  •  03-07-2019
  •  | 
  •  

Вопрос

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

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

Базовый HTML:

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

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

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

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

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

Это было полезно?

Решение

Таблица стилей

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 равной ширине первого дочернего элемента.

Другие советы

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

HTML 

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

Stylesheet 

.wrapper {
  display: table;
}

.caption {
  display: table-caption;
  caption-side: bottom;
}

Этот блок также может быть перемещен слева направо от другого текста. Я проверял это в IE8 +. Вот пример JSBin: http://jsbin.com/xiyevovelixu/1

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

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

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

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

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top