0

请看下面的例子，慢慢缩小你的视口宽度。

随着视口宽度的缩小，我希望第 4 个 div 直接位于第一个 div 下方，然后随着它进一步缩小，我希望第 3 个 div 在第 1 个下方，第 4 个在第 2 个下方。我明白为什么会发生这种情况，我只是不知道该怎么做才能得到我想要的行为。

请帮忙！

<html>
<head>
<style>

.columnClass
{
    float:left;
    border: 2px solid;
}

</style>
</head>
<body>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="400" height="400"/>
</div>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="200" height="600"/>
</div>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="400" height="400"/>
</div>

<div class="columnClass">
    <img src="http://thecybershadow.net/misc/stackoverflow.png" width="200" height="600"/>
</div>

</body>
</html>
4

2 回答 2

2

将您的类参数更改为： 

.columnClass
{
    display: inline-block;
    vertical-align: top;
    border: 2px solid;
}

http://jsfiddle.net/N7usG/
在这里，我减小了图像的宽度以使其正常工作。

于 2013-02-20T18:58:29.250 回答
0

带有浮动的元素：左；会尽可能地向左漂浮，直到他们撞到什么东西。在你的情况下，你有交替长度的图片。当第四个的左上角碰到第二个的右下角时，它就停止了。你可以做的是：

<style>
.columnClass {
    height: 600px;
    float: left;
}
</style>

这应该给容器一个恒定的高度，以便它们按照您想要的方式浮动。

于 2013-02-20T18:43:47.767 回答