使用 css 调整列大小时奇怪的怪癖

Question

我发布了一个较早的问题，关于使列以一种利用视口中最多空间的方式进行换行，对 here。结合一些答案，我想出了以下jfiddle。我将有可变数量的列（2-5）和每列中可变数量的单词。如果您水平调整 jfiddle 窗口的大小，您会注意到中间列使用了视口的三分之一，即使那里几乎没有任何文字，基本上留下空白区域。我不介意使用 jquery/js，但我希望更巧妙地调整列的大小。

我目前的 CSS 是

body {
    padding: 1em;
    display: table;

    width: 100%;
}
div {
    display: table-cell;
        -moz-column-width:7em;
    -webkit-column-width:7em;
    column-width:7em;
}
span {
    display: block;
    width: 5em;
}

body 是容器，div 代表列，span 是每列中的单词。我想不惜一切代价避免的唯一一件事就是让这些列彼此下方。

Answer 1

您的列的行为方式与它们相同，因为它们的大小相同。您有一个 div 样式，因此所有列都应用相同的样式规则，并且（在您的小提琴中）平均共享宽度，每个列获得 1/3 的水平空间。

B 列中只有 7 个条目意味着它没有到达底部，因此不会像其他内容更多的列一样包裹到 div 内部，因此不能使用额外的空间。

这并不是“即使那里几乎没有任何单词”的情况，因为“那里几乎没有任何单词” - 没有足够的内容可以根据表格单元格的高度包装到空间中.

单元格的高度取决于所有三列的内容以及它们的换行方式。因此，无论哪一列的单词最多，都会将其内容包裹起来，直到它在页面上垂直占用一定量的空间。这就是整个表格和所有三列的高度。如果其他两列中的任何一列都没有足够的内容来换行，它们将留下空间。

例如，如果将 A 列中的单词数加倍，则很容易出现 B 列和 C 列都有“剩余空间”的情况。