对于一组 float 的 div，我如何垂直对齐它们，以便它们在较短的 div 下面没有空白的情况下坐在一起，即这里....
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.imadiv {
border: 1px solid #FF0000;
float: left;
margin: 5px;
padding: 10px;
width: 200px;
}
#wrapper {
width:800px;
margin:0 auto;
}
</style>
<title>Untitled Document</title>
</head>
<body>
<div id="wrapper">
<div id="one" class="imadiv">
<p>div1</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
</div>
<div id="two" class="imadiv">
<p>div2</p>
<p>Lorem ipsum dolor sit amet, Nullam blandit.</p>
</div>
<div id="three" class="imadiv">
<p>div3</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
</div>
<div id="four" class="imadiv">
<p>div4
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit.</p>
</div>
<div id="five" class="imadiv">
<p>div5
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit. Donec risus ipsum, ultrices eget nibh et.</p>
</div>
<div id="six" class="imadiv">
<p>div6
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et, auctor tristique quam. Nullam blandit. Donec risus ipsum, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec risus ipsum, ultrices eget nibh et.</p>
</div>
</div>
</div>
</body>
</html>
所以 div5 垂直连接到 div 2 我确定它是 Jquery 但我找不到任何东西？
非常感谢
最佳答案
你可以给你的类(class) .imadiv 一个 min-height 在这里查看更新的 fiddle http://jsfiddle.net/AK32q/3/
CSS:
.imadiv {
border: 1px solid #FF0000;
float: left;
margin: 5px;
padding: 10px;
width: 200px;
min-height:200px;
}
这只是让它们都以相同的高度排列。我敢肯定那不是你想要的。
但是有一个 David DeSandro 的插件，我使用他的砌体插件 http://masonry.desandro.com/
在这里查看你的 fiddle 插件 http://jsfiddle.net/AK32q/5/
J查询:
var $container = $('#wrapper');
// initialize
$container.masonry({
columnWidth: 30,
itemSelector: '.imadiv'
});
var msnry = $container.data('masonry');
关于html - float 时垂直对齐 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24189454/