Div正在赶上其他div

我有一堆带有标签的切换按钮。如果一个按钮的标签太长，那么下一行的第一个按钮应该卡在该标签上。Div正在赶上其他div

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

我已经看过它，每个人都想知道如何使他们的网站，如pintrest。我不希望这看起来像这样，我希望我的第二和第三行不要卡在第一行。

一些人建议放置

display: inline-block;

的地方，但我everywere把它似乎并没有解决它。

来源

2015-04-04 Andrew Pullins

我没有看到对小提琴的任何问题。如果您使用小提琴来演示问题，您应该可以在小提琴上看到这个问题。 – Craicerjack 2015-04-04 18:53:39

我编辑你的小提琴并遇到问题。如果文本太长，向“p”添加一个“overflow：auto”，并且给它一个滚动条，但问题是如果文本太长，你希望显示文本的方式是什么？ – Craicerjack 2015-04-04 18:56:39

这是因为你在你的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

来源

2015-04-04 18:58:12 Nima

这样的工作，但“部分：nth-child（3）div {height：100px;}”创建了一些我刚刚放置的文本，现在位于所有按钮的后面。 – 2015-04-05 00:56:33

部分：第n个孩子（3）div p { margin-top：3px; line-height：15px; } 这似乎没有为我做任何事情。 – 2015-04-05 00:56:53

你的布局似乎有限，所以文本的长度也有限制。您需要手动更改高度以将其调整为文本。 – Nima 2015-04-05 01:06:31

Div正在赶上其他div

回答

相关问题