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