使用CSS重新调整列大小时的怪异现象 [英] Weird quirk when re sizing columns with css

问题描述

我发布了一个较早的问题，关于如何使列进行包裹以充分利用视口中的空间，对 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代表列，跨度是每一列中的单词.我不惜一切代价要避免的唯一事情是使各列彼此相邻.

解决方案

您的列的行为与它们相同，因为它们的大小相等.您为div设置了一个样式，因此所有列都应用了相同的样式规则，并且(在您的小提琴中)均等地共享了宽度，每个宽度都获得了1/3的水平空间.

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

实际上不是即使其中几乎没有任何单词"的情况，因为那里几乎没有任何单词"-没有足够的内容根据表格单元格的高度包装到空间中

单元格的高度取决于所有三列的内容以及它们的包装方式.因此，无论哪个字词最多，它的内容都会自动换行，直到在页面上垂直占据一定的空间为止.这就是整个表格和所有三列的高度.如果其他两列中的任何一列没有足够的内容来包装，则会留下空间.

例如，如果将A列中的单词数加倍，则很容易出现B列和C列都存在左空格"的情况.

I posted an earlier question about making having columns wrap in a way that utilizes the most space in the viewport, right here. Combining some of the answers, I came up with the following jfiddle. I will be having a variable number of columns (2-5) and a variable number of words in each column. If you resize the jfiddle window horizontally, you'll notice that the middle column uses a third of the viewport even though there are barely any words in there, essentially leaving empty white space. I wouldn't mind using jquery/js, but I'd like to have the columns more smartly resized.

The current CSS I have is

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

The body is the container, and the divs represent the columns, and the spans are the words in each column. The only thing I want to avoid at all costs is having the columns go underneath each other.

解决方案

Your columns act the way they do because they are equal in size. You have a single style for div so all columns get the same styling rules applied and (in your fiddle) equally share the width getting 1/3 of the horizontal space each.

Only having 7 entries in Column B means that it doesn't reach the bottom so does not wrap into inside the div like the other columns with more contents, so cannot use the additional space.

It not really a case of "even though there are barely any words in there" its because "there are barely any words in there" - there is not enough content to wrap into the space based on the height of the table cells.

The height of the cell is determined by the contents of all three columns and how they wrap. So whichever column has the most words will wrap its contents until is takes up a amount of space vertically on the page. This is then the height for the entire table and all three columns. If either of the other two columns don't have enough content to wrap they will leave space.

If you double the number of words in columns A for example you can easily get a situation where there is "left space" in both column B and column C.

这篇关于使用CSS重新调整列大小时的怪异现象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！