可以这么说,我想创建一个 div
框“网格”。
目前我的 div
框没有正确对齐。不同高度的 div
框会导致某些 div
之间存在较大的垂直空间。 div
框也更偏向右侧。
我希望 div
框彼此保持相同的边距,而不管框的高度如何,并且它们从左 > 右排列。
我希望 div
框像这样对齐:
这是发生了什么的例子:http://jsfiddle.net/P4S8z/
HTML:
.container {
position: relative;
float: left;
margin: 0;
}
.box {
position: relative;
display: block;
float: left;
width: 250px;
margin-left: 1.5em;
margin-bottom: 0.5em;
padding: 0 10px 0;
color: #666;
background: #fff;
border: 1px solid #d2d2d2;
border-radius: 3px;
}
.box h3 {
position: relative;
display: block;
height: 20px;
line-height: 1.3em;
width: 260px;
margin: 0;
padding: 5px 10px;
left: -15px;
top: 8px;
color: #cfcfcf;
text-shadow: 0 1px 1px #111;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
background: #333;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
<div class="container">
<div class="box" style="height:225px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:160px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:200px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:180px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:150px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:170px;">
<h3>Blah blah</h3>
</div>
</div>
最佳答案
我能想到的使用纯 CSS 的最简单方法是指定列。
我用一个 div 包围了每个“列”,并将这些 div 向左浮动。
这是一个更新的 fiddle :http://jsfiddle.net/Renson/P4S8z/4/
这应该像你想要的那样保持边距相等
新的 HTML
<div class="container">
<div class="subcontainer">
<div class="box" style="height:225px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:180px;">
<h3>Blah blah</h3>
</div>
</div>
<div class="subcontainer">
<div class="box" style="height:160px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:200px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:150px;">
<h3>Blah blah</h3>
</div>
<div class="box" style="height:170px;">
<h3>Blah blah</h3>
</div>
</div>
添加到 CSS
.subcontainer{
float: left;
}
关于css - 如何无缝对齐不同大小的 block div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21941711/