Div正在抓住其他div

Question

我有一堆切换按钮，下方有标签。如果按钮的标签太长，那么下一行的第一个按钮就会卡在该标签上。

继承我的代码： https://jsfiddle.net/Android272/c150305z/

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

有些人建议放置

 display: inline-block;

在某个地方，但每次我放置它似乎都没有解决它。

Answer 1

那是因为你在你的div中使用了不相等的高度。

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

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

JsFiddle

修改：另一种方法是通过调整p来保存间距，但仍然需要为父级使用height。

这应该做：

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