2

我试图玩弄 HTML 和 CSS。

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

JS小提琴链接问题

<!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 个元素应该自动从下一行开始，并相应地定位在第一行元素的下方。

我想要的是这样的东西。

在此处输入图像描述

有人可以帮我解决这个问题。

提前致谢，

苏达萨南

4

3 回答 3

1

添加clear:left到需要添加break的div中

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

演示

于 2013-07-08T09:26:16.883 回答
1

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

希望这可以帮助

于 2013-07-08T09:40:28.883 回答
0

使用显示内联块而不是向左浮动：

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

演示

我认为你应该使用 JS 来准确地得到你想要的。

于 2013-07-08T09:42:37.470 回答