用css重新调整列大小时的奇怪现象
用css重新调整列大小时的奇怪现象
提问于 2015-03-03 04:28:12
我在前面发布了一个关于如何使列以使用视图中最大空间的方式包装的问题，对这里。结合一些答案，我想出了下面的小提琴。我将有一个可变的列数(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代表列，跨是每个列中的单词。我想不惜一切代价避免的唯一一件事，就是让列彼此在下面。
Stack Overflow用户
回答已采纳
发布于 2015-03-03 04:58:15
您的列的行为方式，因为它们的大小相等。您有一个div的样式，所以所有的列都得到了相同的样式规则，并且(在你的小提琴中)平均地分享宽度，每一个得到1/3的水平空间。
B列中只有7个条目，这意味着它不会到达底部，因此不会像其他内容更多的列那样进入div，因此不能使用额外的空间。
这并不是“尽管里面几乎没有任何单词”的情况，而是因为“里面几乎没有任何单词”--没有足够的内容根据表格单元格的高度来包装到空间中。
单元格的高度取决于所有三列的内容及其包装方式。因此，无论哪一列有最多的单词，都会将其内容包装起来，直到在页面上占据一定的空间。这是整个表和所有三列的高度。如果另外两列中的任何一列没有足够的内容来包装，它们就会留下空间。
例如，如果将A列中的单词数增加一倍，则可以很容易地得到B列和C列中都有“左空间”的情况。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28824098
复制相关文章
相似问题
腾讯云开发者
