我正在尝试创建一个包含 float 图像的垂直流动布局。
当我更改窗口的高度时,图像会正确缩放,但是父 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;
}
这可能吗?
最佳答案
这是因为您已将元素 float 。您应该改用“display:inline”。
当您 float 某些内容时,您会将其从文档流中取出。这可以防止它周围的元素对其使用react。
.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;
}
fiddle :http://jsfiddle.net/cCHdU/2/
关于html - 动态更改图像的高度不会调整父 div 的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18500878/