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/

动态更改图像的高度不会调整父div的宽度

1 个答案: