0

我需要重新排序具有属性display: inline-block且未定义宽度的元素列表以填充所有空白空间。

你可以通过这个例子理解我的意思：

http://jsbin.com/ozuxip/1/edit

如您所见，在第一个列表中，在“Not so long text”附近有很多空白，而在第二个列表中，该空间填充了两个足够短的元素以填充空间。我需要自动化它。

在此示例中，您可以使用红色矩形看到“空白”是什么 http://jsbin.com/ozuxip/7/edit

我可以使用 PHP、jQuery、CSS 等。你有什么建议吗？

4

2 回答 2

2

如果我正确理解了您的问题，您基本上想要不同宽度的元素来创建某种整齐的网格。如果是这样，您可以尝试使用同位素插件：http: //isotope.metafizzy.co/

于 2013-02-15T22:06:00.070 回答
0

如果我理解正确，您想删除 LI 之间的空格吗？这就是我得到的。将整个 UL 封装在父元素中。

<div id="test">
<ul class="discussions">
    <li class="discussion btn btn-primary">Not so long text</li>
    <li class="discussion btn btn-primary">Very very long text with lot of words.</li>
    <li class="discussion btn btn-primary">Another long text foobar.</li>

    <li class="discussion btn btn-primary">I'm short</li>
    <li class="discussion btn btn-primary">I'm so short</li>
    <li class="discussion btn btn-primary">And me?</li>
    <li class="discussion btn btn-primary">Shut up</li>
    <li class="discussion btn btn-primary">Ok, sorry... peace bro</li>
</ul>
</div>

然后，将其添加到您的 CSS

#test{
  font-size: 0px;
}

li
{
  margin: 0px !important;
  font-size: 12; //this can be varied depending on your desired font size
}
于 2013-02-14T10:48:16.480 回答