Question

我试图使用HTML和CSS。

我的div需要与我下面提到的不同。

<!doctype>
<html>
<head>
<style>
div{
    float:left;
    background-color:green;
    width:10px;
    margin:1px;
}
body{
    width:50px;
}
</style>  
<body>
<div style="height:20px"></div>
<div style="height:30px"></div> 
<div style="height:40px"></div>
<div style="height:35px"></div>
<div style="height:55px;background-color:red"></div>
</body> 
</html>

我希望红色框和任何新框如果需要渲染也要在第二行从左边开始渲染，就在相应的第一行元素下面。（在元素之间有一个特定的边距）

条件：

矩形的宽度始终相同;只有高度不同。

假设在我的jsfiddle示例中，给定的宽度只能占用4个元素一排。所以，第5个元素应该自动从下一行开始，并相应地位于第一行元素下面。

我想要的是这样的。

enter image description here

请有人帮我解决这个问题。

提前致谢，

Sudharsanam.N

Answer 1

将clear:left添加到需要添加中断的div

  div:nth-child(5){
    clear:left
}

<强> DEMO

Answer 2

如果你想为你的div获得“类似pinterest”的效果，你需要一些javascript，看看这个jQuery插件：http://masonry.desandro.com/index.html

希望这有帮助

Answer 3

使用display inline block而不是float left：

div{
    display:inline-block;
    background-color:green;
    width:10px;
    margin:1px;
    vertical-align:top;
}
body{
    width:60px;
}

Demo

我认为你应该使用JS来完全得到你想要的东西。

div的定位 - CSS

3 个答案: