如何无缝对齐不同大小的块div? [英] How to seamlessly align block divs of different sizes?
问题描述
我想创建一个 div
框网格"可以这么说.
目前我的 div
框没有正确对齐.div
不同高度的盒子会导致一些 div
之间有很大的垂直空间.div
框也更靠右侧.
我希望 div
框彼此之间保持相同的边距,而不管框的高度如何,并让它们从左侧排成一行 >没错.
我希望 div
框像这样对齐:
这是正在发生的事情的例子:http://jsfiddle.net/P4S8z/
HTML:
.container {位置:相对;向左飘浮;边距:0;}.盒子 {位置:相对;显示:块;向左飘浮;宽度:250px;左边距:1.5em;底边距:0.5em;填充:0 10px 0;颜色:#666;背景:#fff;边框:1px 实心 #d2d2d2;边框半径:3px;}.box h3 {位置:相对;显示:块;高度:20px;行高:1.3em;宽度:260px;边距:0;填充:5px 10px;左:-15px;顶部:8px;颜色:#cfcfcf;文本阴影:0 1px 1px #111;边框顶部:1px 实心 #ccc;边框底部:1px 实心 #ccc;背景:#333;box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}
<div class="box" style="height:225px;"><h3>胡说八道</h3><div class="box" style="height:160px;"><h3>胡说八道</h3>
<div class="box" style="height:200px;"><h3>胡说八道</h3>
<div class="box" style="height:180px;"><h3>胡说八道</h3>
<div class="box" style="height:150px;"><h3>胡说八道</h3>
<div class="box" style="height:170px;"><h3>胡说八道</h3>