gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 12:14:40 26 4
gpt4 key购买 nike

我之前发布了一个关于让列以一种利用视口(viewport)中最多空间的方式换行的问题,对 here .结合一些答案,我想出了以下 jfiddle .我将有可变数量的列 (2-5) 和可变数量的单词在每列中。如果水平调整 jfiddle 窗口的大小,您会注意到中间的列使用了三分之一的视口(viewport),尽管那里几乎没有任何文字,基本上留下了空白。我不介意使用 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 是每列中的单词。我想不惜一切代价避免的唯一一件事就是让这些列在彼此下面。

最佳答案

您的列之所以如此,是因为它们的大小相等。你有一个 div 样式,所以所有列都应用了相同的样式规则,并且(在你的 fiddle 中)平均共享宽度,每个列获得水平空间的 1/3。

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

这不是真正的“即使那里几乎没有任何文字”的情况,而是因为“那里几乎没有任何文字” - 根据表格单元格的高度,没有足够的内容来包装到空间中.

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

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

关于html - 使用 css 调整列大小时的怪癖,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28824098/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com