Html 如何使浮动div直接断开到视口的左侧？_Html_Css_Css Float

Html 如何使浮动div直接断开到视口的左侧？

html css

Html 如何使浮动div直接断开到视口的左侧？,html,css,css-float,Html,Css,Css Float,请参见下面的示例，并慢慢缩小视口宽度随着视口宽度的缩小，我希望第四个div直接位于第一个div之下，然后随着它的缩小，我希望第三个div位于第一个div之下，第四个div位于第二个div之下。我明白为什么会这样，我只是不知道该怎么做才能得到我想要的行为请帮忙 <html> <head> <style> .columnClass { float:left; border: 2px solid; } </style> </

请参见下面的示例，并慢慢缩小视口宽度

随着视口宽度的缩小，我希望第四个div直接位于第一个div之下，然后随着它的缩小，我希望第三个div位于第一个div之下，第四个div位于第二个div之下。我明白为什么会这样，我只是不知道该怎么做才能得到我想要的行为

请帮忙

<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>


.专栏类
{
浮动：左；
边框：2倍实心；
}

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

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


.专栏类{
高度：600px；
浮动：左；
}

这将为容器提供一个恒定的高度，以便它们按照您希望的方式浮动。

将类参数更改为：

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

在这里，我缩小了图像的宽度，以查看它是否正常工作。

它现在在做什么？您可能需要做的是将所有这些div放在包装div中，并将其宽度设置为100%。现在，第四个div卡在第三个div下面。我想让它们直接包装到左边，但这似乎不是float的工作方式。我想避免第四个被卡在第三个下面，第1个和第2个下面有一个很大的空白。这不起作用，因为每个div的内容都将由用户输入CMS，我需要考虑div最终的宽度和高度。事实是，只要有不同高度的元素，它们在浮动时会相互碰撞。如果您不想在css中设置它，那么您需要使用javascript找到组中最大的高度值，并将所有高度值都设置为高度值。明白了。我理解javascript解决方案。然而，有没有办法让第四个div一路向左，一路向上，紧紧地包裹在第一个div下面？如果我使用javascript将它们的高度增加到最大值，那么我只需要创建额外的空白。紧挨着左边的底部？不，啊，这就是我想要的。谢谢！我知道迪莫诺说这不可能，但第四组有没有可能把自己卷起来，这样它就能碰到第一组？不，没有办法。也许你应该试试jquery.mashise库。哦一定要试试！