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

Question

我发布了一个较早的问题，内容是让列以一种在视口中使用最多 space 的方式换行，对 . Combining some of the answers, I came up with the following jfiddle。我将有可变数量的列 (2-5) 和可变数量的单词在每列中。如果水平调整 jfiddle window 的大小，您会注意到中间的列使用了视口的三分之一，即使那里几乎没有任何文字，基本上留下空白 space。我不介意使用 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 的样式只有一种，因此所有列都应用了相同的样式规则，并且（在您的 fiddle 中）平均共享宽度，每个列的宽度为水平 space 的 1/3。

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

这不是 "even though there are barely any words in there" 的情况，因为 "there are barely any words in there" - 根据 table 单元格的高度，没有足够的内容包装到 space 中.

单元格的高度由所有三列的内容及其换行方式决定。因此，无论哪一列的单词最多，都会将其内容换行，直到在页面上垂直占据 space 的空间。这就是整个 table 和所有三列的高度。如果其他两列中的任何一列没有足够的内容进行换行，它们将离开 space.

例如，如果您将 A 列中的单词数加倍，您很容易会遇到 B 列和 C 列中都有 "left space" 的情况。

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

Weird quirk when re sizing columns with css

html

css

multiple-columns