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;
}

正文是容器，div代表列，跨度是每列中的单词。我不惜一切代价避免的唯一一件事就是将列放在彼此之下。

Answer 1

您的列按照他们的方式行事，因为它们的大小相等。你有一个div的样式，所以所有列都应用相同的样式规则，并且（在你的小提琴中）平均分享宽度，每个水平空间的1/3。

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

这并不是一个真实的情况，即使那里几乎没有任何文字＆＃34;因为＆＃34;那里几乎没有任何文字＆＃34; - 根据表格单元格的高度，没有足够的内容包装到空间中。

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

例如，如果你将A列中的单词数量增加一倍，就可以很容易地得到一个存在＆＃34;左空间＆＃34;在B栏和C栏中都有。

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

1 个答案: