DIV ширина зависит от ширины IMG

Question

<div id="item"> 
    <img src="/images/01.jpg" /> 
</div> 

<div id="item"> 
    <img src="/images/02.jpg" /> 
</div> 

Я хочу дать «ширину» каждому DIV (item) в зависимости от ширины изображения в нем. Каждая ширина изображений отличается.

Answer 1

Для этого вам не нужно использовать jQuery. Вы можете достичь этого полностью через CSS. Если вы плаваете деталь, а затем очистить его, вы получите ожидаемый результат:

div { 
    float: left; 
    clear: both; 
} 

Вот jsFiddle Demo

Answer 2

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

jQuery(function() { 
    $('.item img').load(function(){ 
     var $this = $(this); 
     $this.parent().width($this.width()); 
    }) 
}) 

Демонстрация: Fiddle

Кроме того, идентификатор элемента должен быть уникальным, поэтому я изменил идентификатор до CLAS s

Answer 3

Редактировать HTML. Идентификаторы должны быть уникальными.

<div class="item"> 
    <img src="/images/01.jpg" /> 
</div> 

<div class="item"> 
    <img src="/images/02.jpg" /> 
</div> 


.item 
{ 
    padding:1px 1px 1px 1px; 
    margin: 1px 1px 1px 1px; 
    position:relative; 
    float:left; 
} 

Answer 4

Среди других ответов, мое предложение установить следующий CSS для элементов

div { 
    display: inline-block; 
} 
img { 
    display: block; 
} 

Вот пример: http://jsfiddle.net/wSLMV/

Обратите внимание, что я просто сослаться на тег (div и img). Вы, вероятно, захотите обратиться к #item, но помните, что атрибут id должен быть уникальным! Возможно, вы захотите заменить его class, например.

<div class="item"> 
    <img src="/images/01.jpg" /> 
</div> 

, а затем обращаться к нему в CSS:

.item { 
    display: inline-block; 
} 
.item > img { 
    display: block; 
}