自动高度div和图像CSS

Question

我有一组身高未知的图像。每个代码如下所示：

代码：

<div class="x">
   <div class="a"><img src="foto.png" /></div>
   <div class="b"></div>
</div>

我尝试将display: block用于图片，height: auto用于课程x。 我不知道为什么，但我在Firefox上获得了预期的行为，但不是Opera 19.

在Firefox中，我获得了具有随机高度图像的正常方块 - 一对一，具体取决于图像高度。在Opera中我只得到扁平的矩形，我只能看到图像的顶部，其余部分被截断。

我如何才能在所有浏览器上运行？

CSS

.x
{
    min-height: 200px;
}
.a img
{
    display: block;
}
.b
{
    display: none;
}

Answer 1

将overflow: hidden;或浮点数添加到.x。只要您没有为.a或{{1}指定高度，并且.x应该适合.a和.x的高度到图像的高度}}

Answer 2

问题出在我使用的砌体上。对不起，我没有提到它。 到目前为止我找到的解决方案：jquery masonry breaks(stacks images) in chrome/safari but only on first load