html - 动态改变图像的高度不会调整父 div 的宽度

Question

我正在尝试创建一个包含浮动图像的垂直流体布局。

当我更改窗口的高度时，图像会正确缩放，但是父 div 的宽度不会随着它包含的图像而增加/减少。

jsFiddle - 修改结果面板的高度，看看我在说什么。

HTML：

<div class="container">
    <div class="item">
        <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
    </div>
    <div class="item">
        <img src="http://lorempixel.com/output/animals-q-c-640-480-7.jpg" />
    </div>
</div>

CSS：

.container {
    position: absolute;
    top: 10px;
    bottom: 300px;
    width: 100%;
    background: blue;
}
.item {
    margin-right: 10px;
    position: relative;
    height: 100%;
    width: auto;
    background: red;
    display: inline-block;
    float: left;
}
.item img {
    display: block;
    height: 100%;
    width: auto;
}

这甚至可能吗？

Answer 1

这是因为您已浮动该项目。您应该改用“display:inline”。

当您浮动某些内容时，您会将其从文档流中取出。这可以防止它周围的元素对其做出反应。

.container {
    position: absolute;
    top: 10px;
    bottom: 300px;
    width: 100%;
    background: blue;
}
.item {
    height: 100%;
    width: auto;
    margin-right: 10px;
    background: red;
    display:inline;
}
.item img {
    height: 100%;
    width: auto;
    display:inline;
}

小提琴：http: //jsfiddle.net/cCHdU/2/