如何将div对齐顶部

Question

好的，所以我将我的wordpress内容设置为彼此左边的所有浮动内容。所以它将是3列。

现在，当一个div的标题更长时，这些框就到处都是。这就是我的意思（见下图）

请注意，詹姆斯·布朗标题更长，另外两个方框落下。

无论标题有多长，我怎样才能让它们浮起来。

我已经尝试了vertical-align:top;，但这不起作用

Answer 1

你可以通过两种方式获得它。

如果您希望每行上的方框顶部对齐：只需使用.clear元素。

h2 {
    font-weight: bold;
    clear: left;    
}
.box { 
    width: 50px;
    min-height: 50px;
    background: #ccc;
    margin: 3px;
    padding: 3px;
    float: left;
}
.clear {
    clear: both;
    height: 0px;
}

<h2>Without columns</h2>
<div class="box">1 Lorem Ipsum</div>
<div class="box">2 Lorem Ipsum Lorem Ipsum</div>
<div class="box">3 Lorem Ipsum</div>
<p class="clear">&nbsp;</p>
<div class="box">4 Lorem Ipsum Lorem</div>
<div class="box">5 Lorem Ipsum</div>
<div class="box">6 Lorem Ipsum</div>
<p class="clear">&nbsp;</p>
<div class="box">7 Lorem Ipsum</div>
<div class="box">8 Lorem Ipsum</div>

如果你想让你的盒子粘在上面的盒子上，请使用colums（你需要修改一下你的PHP代码）

h2 {
    font-weight: bold;
    clear: left;    
}
.box { 
    width: 50px;
    min-height: 50px;
    background: #ccc;
    margin: 3px;
    padding: 3px;
    float: left;
}
.column {
    width:60px;
    float: left;
}

<h2>With columns</h2>
<div class="column">
    <div class="box">1 Lorem Ipsum</div>
    <div class="box">4 Lorem Ipsum Lorem</div>
    <div class="box">7 Lorem Ipsum</div>
</div>
<div class="column">
    <div class="box">2 Lorem Ipsum Lorem Ipsum</div>
    <div class="box">5 Lorem Ipsum</div>
    <div class="box">8 Lorem Ipsum</div>
</div>
<div class="column">
    <div class="box">3 Lorem Ipsum</div>
    <div class="box">6 Lorem Ipsum</div>
</div>

Answer 2

使用新的nth-child()选择器，您可以执行以下操作：

div:nth-child(3n+1) {
  clear:left;
}

这样，第1，第4，第7等孩子将移动框的左侧“清除”所有其他元素。

使用此方法的优点是您可以响应地调整布局。例如，在移动设备上，每行可以有两个，每行有4个大桌面。还没有非语义标记。

缺点是它在版本9之前在IE中不起作用，但你可以用JavaScript解决这个问题。例如jQuery的：

// polyfill for browsers that don't support nth-child() CSS selectors
$('.box:nth-child(3n+1)').style('clear', 'left');

请参阅：http://jsfiddle.net/rVHgR/