Question

我正在尝试使用CSS3中的最新列功能。每个ul都有不同的高度，我希望它们具有相同的边距高于和低于。目前，因为一个ul比其余ul长得多，所以它推动了第二行。最长的.wrapper { background-color: grey; max-width: 600px; -webkit-column-width: 50%; } ul { background-color: orange; display: inline-block; vertical-align: top; width: 20%; }是否有可能不会在它下方施加如此大的空间？

http://jsfiddle.net/t5ng3/

CSS：

<div class="wrapper">
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
    </ul>
    <ul>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
        <li>Item</li>
    </ul>
</div>

HTML：

{{1}}

Answer 1

这是因为白色空间通常会导致4px偏移，为了解决这个问题，有多种方法，便宜的方法是使用margin-left: -4px;但如果font-size > 100%这将会失败1}}，另一种方法是在父元素上使用font-size: 0;，最后一种方法是通过粘贴ul元素从源中取出缩进/空格。

Demo

您也可以float将left元素添加到div，但为此，如果将它们包装在容器section / ul元素中会更好。

现在我不确定你是否意识到这一点，但是你可能想看看column-count属性，它可以完成类似的工作而不会让自己失去{{1}}个元素。< / p>

Answer 2

您看到的“列”纯粹是您的列表是内联块的结果，而不是因为您使用的是列宽。列宽属性似乎不像您期望的那样使用百分比值。

如果您只想要2列，则可以使用column-count: 2而不是column-width: 50%。

http://jsfiddle.net/t5ng3/12/

.wrapper {
    background-color: grey;
    max-width: 600px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
}
ul {
    background-color: orange;
}

如果子元素不应跨列分割，那么break-inside属性就是您要查找的内容，而不是尝试使用display: inline-block。

ul {
    background-color: orange;
    -webkit-column-break-inside: avoid; /* old name */
    page-break-inside: avoid; /* Firefox uses non-standard property */
    break-inside: avoid;
}

您可能希望删除第一个元素的上边距：

ul:first-child {
    margin-top: 0;
}

Answer 3

这种情况正在发生，因为</ul>和<ul>之间存在空格。 inline-block元素留空。

删除空格即写</ul><ul>将解决您的问题。 Updated fiddle.

删除CSS3列中不必要的空间

3 个答案: