css - 如何将 div 对齐到顶部

Question

好的，所以我将我的 wordpress 内容设置为全部浮动。所以它将是3列。

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

请注意，james brown 标题较长，而其他两个框则向下倾斜。

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

我已经尝试过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>

如果您希望您的盒子粘在上面的盒子上，请使用列（您需要修改一些 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 个。也没有非语义标记。

缺点是它在 IE 9 之前的版本中不起作用，但您可以使用 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/