css - Div 正在 catch 其他 div

Question

我有一堆切换按钮，下面有标签。如果按钮的标签变得太长，那么下一行的第一个按钮将卡在该标签上。

这是我的代码: https://jsfiddle.net/Android272/c150305z/

我查了一下，每个人都想知道如何让他们的网站像 pintrest。我不希望它看起来像那样，我希望我的第二行和第三行不要卡在第一行上。

有人建议放置

 display: inline-block;

某个地方，但我把它放在任何地方，它似乎都没有修复它。

Answer 1

那是因为您在 div 中使用了不等高。

为第三个部分的 div 设置一个高度，它将在行中保持相等:

section:nth-child(3) div {height:110px}

JsFiddle

编辑:另一种方法是通过调整p来节省间距，但仍然需要为父级使用高度。

应该这样做:

section:nth-child(3) div {
    height:100px; /* Same amount of space as other divs  */
}
section:nth-child(3) div p {
    margin-top:3px;
    line-height: 15px;
}

JsFiddle