Question

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

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

我想给＆＃34;宽度＆＃34;每个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更改为类值

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

DIV宽度取决于IMG宽度

4 个答案: