DIV寬度取決於IMG寬度

Question

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

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

我想給每個DIV（項目）「寬度」取決於其中的圖像寬度。 圖像的每個寬度都不相同。

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

另外的元素的ID必須是唯一的，所以改變了ID爲CLAS s值

Answer 3

編輯您的HTML。 ID必須是唯一的。

<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; 
}