CSS - ширина div в зависимости от размера изображения выше

<html><head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">

    .box {background:gray;border:3px solid black;float:left;}

    </style>
</head>

<body>
   
<div class="box">
    <img src="http://i.stack.imgur.com/shWOu.jpg">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mattis ante ac sapien pellentesque vitae condimentum odio euismod. In purus nibh, ullamcorper in suscipit non, scelerisque eget sem. </p>
</div>
</body></html>

ОТВЕТЫ

Ответ 1

проблема с вашим запросом заключается в том, что если div не имеет определенной ширины, текст не "знает", когда обертывать, и почему он использует ширину divoutout...

Итак... Вам нужно добавить ширину в div-outter или в случае использования div, который окружает изображение + текст, ширину в этом div.

EDIT:

здесь вы идете: http://jsfiddle.net/jnmtu/

Я сделал тест (на моем примере третий) со таблицей, чтобы сначала проверить его и обновить мой взгляд на то, как он работает с таблицами, а затем я применил его к способу CSS.

Как это работает:

Вам нужно иметь окружение div с минимальной шириной (1%) и отображать его как таблицу; то внутренний div (соответствующий "ячейке" ) должен иметь автоматическую высоту и скрытое переполнение, это необходимо, чтобы "заставить" его растягивать ширину и высоту div (это общий трюк).

ПРИМЕЧАНИЕ. Я не тестировал в Internet Explorer, он работает с Firefox и Safari.

Ответ 2

То, что было бы необходимо, это атрибут width, такой как доступный в макетах Android, который называется width: wrap-content. Может быть, это было бы хорошим предложением для CSS, поскольку он оказался удобным при разработке экранов.

Ответ 3

@JackJoe сказал это хорошо, вам нужно установить ширину в обертку div, чтобы она соответствовала ширине внутреннего изображения.

Вот один из способов сделать это: http://jsfiddle.net/audetwebdesign/bpN8x/

В основном, я использую jQuery для определения ширины изображения, а затем устанавливаю ширину обертки div.

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

Я не думаю, что CSS-только возможно из-за того, как box-model определяет ширину по мере размещения контента. Ширины наследуются от родительского элемента и не передаются из дочерних элементов.

Ответ 4

Поисковый запрос Google вызывает тот факт, что этот вопрос задан в миллион раз и что все еще нет удовлетворительного пути без привязки ширины к контейнеру

Однако...

Я думаю, что это работа, которая лучше всего обрабатывается элементом таблицы . Элемент table имеет элемент caption, который, я бы сказал, является инструментом для задания?

Все браузеры, за исключением IE6/7, обрабатывают следующий бит кода: IE6/7 обрабатывает его до ширины, но не поддерживает CSS caption-side, чтобы он не помещал надпись под изображение - что может быть или не быть проблемой - IMHO он все равно будет выглядеть красиво (в этих кадрах;)), но YMMV, может быть, альтернатива, если вы действительно не хочу, чтобы script ширина в

<div class="content">
<table summary="image with caption">
<caption>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</caption>
<tr>
<td><img src="http://dummyimage.com/300x300/dad/fff" width="300" height="300" alt="This image is awesome"></td>
</tr> 
</table>
</div>

CSS

.content {
  float: left;
  padding: 20px;
  border: 2px solid #000;
}

.content table {
  border: 0;
  border-collapse: collpase;
}

.content td {
  padding: 0;
}

.content caption { 
  caption-side: bottom; 
}

Ответ 5

fwiw самый маленький jquery, с которым я столкнулся, - это

<div class="caption_wrap" style="float:right">
<img src="IMAG0332.jpg" onload="jQuery(this).parent().width(jQuery(this).width());"/><br />
this is some caption text, this is some caption text, this is some caption text, this is some     
caption text</div>

быстро.

Ответ 6

Если я правильно вас понял,

Если изображение имеет тот же размер, что и div (черная рамка), текст автоматически будет делать то, что вы хотите. Или попробуйте overflow: none; в div.

Но, лично я бы так не сделал. Divs являются гибкими и масштабируемыми. Поэтому я бы сказал, используя 2 или 3 divs друг в друге.

например.

<div id="black-border">

<div id="for-image">

<div id="the-image-itself">
<img src="image.jpg"/>
</div>

<div id="the-comment">
<p> This image is awesome</p>
</div>

</div>

</div>

просто придать изображению фиксированный размер и ввести комментарий. вы также можете установить

#the-image-itself, #the-comment{
display: block;
}

Если вам нравится

надеюсь, что это поможет:)