для Internet Explorer.

ти, я пытаюсь создать версию элемента 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.

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

 strager06 мар. 2009 г., 03:15
Что не так с настройкой ширины на div?
 DisgruntledGoat06 мар. 2009 г., 16:00
Я просто не думаю, что это хороший код. Для начала это означает, что я дублирую объявление ширины. Если я изменю ширину изображения, я должен изменить и ширину div. (Я знаю, что они только рядом друг с другом.) Хотя есть решение ниже.

Ответы на вопрос(5)

чтобы соответствовать изображению автоматически, вы можете использовать

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

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

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

 Angel06 мар. 2009 г., 03:29
Согласно сquirksmode.org/css/display.html это не поддерживается выпущенными версиями IE. Я думаю, что единственный вариант - использовать таблицу.
 strager06 мар. 2009 г., 03:17
Ваш пример с настройкой дисплея не работает в IE7. Не уверен насчет IE6.

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

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

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

HTML
<div class="wrapper">
  <img src="image.jpg" />
  <div class="caption">My caption...</div>
</div>
стилей
.wrapper {
  display: table;
}

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

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

 Möhre08 июн. 2016 г., 11:12
Это решение будет работать только до тех пор, пока вам не нужны границы или фон.wrapper, так как оба рухнут только на изображение. Это соответствует в Chrome, FF & Edge
Решение Вопроса

стилей

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

 DisgruntledGoat06 мар. 2009 г., 15:52
Также селектор * - плохая идея. Я мог бы иметь больше элементов в заголовке (например, ссылки), которые могут быть испорчены. Это должно быть заменено простоimg (duv по умолчанию 100%)
 Antony Scott06 мар. 2009 г., 16:00
честный комментарий к селектору *
 DisgruntledGoat06 мар. 2009 г., 15:44
Я обычно устанавливаю ширину / высоту для изображений, потому что это лучше для рендеринга в браузере - никакой разметки не происходит при загрузке страницы, а разметка сохраняется, когда изображения недоступны. В этом случае, я думаю, я бы поставил высоту на изображение, и оно унаследует ширину.

Ваш ответ на вопрос