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

我发布了一个关于让列的换行方式利用视口中的最大空间的问题，右侧为here。结合一些答案，我想出了以下jfiddle。我将有可变数量的列（2-5）和每列中可变数量的单词。如果水平调整jfiddle窗口的大小，则会注意到中间列使用视口的三分之一，即使几乎没有任何单词在内，基本上仍会留下空白空间。我不介意使用jquery/js，但我想让这些列更加巧妙地调整大小。使用css重新调整列时的奇怪怪癖

电流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代表列，而跨度是在每列中的话。我不惜一切代价避免的唯一事情就是将列放在彼此之下。

来源

2015-03-03 thatandrey

您的专栏以他们的方式行事，因为他们的大小相同。你有div的单一样式，所以所有的列都得到相同的样式规则，并且（在你的小提琴中）平均分配每个水平空间1/3的宽度。

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

它不是真的“即使几乎没有任何单词”的情况，因为“那里几乎没有任何单词” - 没有足够的内容可以根据表的高度包裹到空间中细胞。

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

如果双字的列A的数量，例如，你可以很容易地在这两个列B和C列，其中有“剩余空间”为解释

来源

2015-03-03 04:58:15

感谢的情况下，它是有道理的，但我可以改变什么来考虑可变列宽，因为我非常想摆脱白色空间...... – thatandrey 2015-03-03 05:08:47

您将需要找到最少数量的字，并添加一类“至少“当您渲染到标记中时。然后，您可以运行一些脚本来检查浏览器的宽度，并在只有一列适合时将$（'。least'）的宽度设置为5em，当适合两列时将10em的宽度设置为等等。 – 2015-03-03 06:10:57

您可以通过身体部分达到此效果{padding：1em; display：table; border-collapse：collapse; 宽度：100％; } div { display：table-cell; -moz-column-width：7em; -webkit-column-width：7em; column-width：7em; } span { display：block; white-space：nowrap; text-align：center; } .least { width：10em; } – 2015-03-03 06:11:26

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

回答

相关问题