I wish to achieve a layout where an element (in my case a <ul>
) expands to 2 (or more) columns when the height reaches a certain limit.
我希望实现一种布局,当高度达到一定限度时,元素(在我的情况下为
-
)会扩展为2(或更多)列。
So for example, if the height is only enough for 3 items, and I have 5, the 4th and 5th item go to the second column, which is only created if needed.
因此,例如,如果高度仅适用于3个项目,而我有5个,则第4个和第5个项目将转到第二个列,仅在需要时创建。
I tried to do this by setting the max-height
as suggested here with column-count
and column-width
set to auto
via the columns
(I tried setting them separately too, same behaviour).
我尝试通过设置此处建议的max-height来实现此目的,其中列数和列宽通过列设置为auto(我也尝试单独设置它们,相同的行为)。
If on the other hand I change the column-count
to a fixed integer, it works and balances the items, but this is not dynamic as I need it. (If I have only 2 elements I don't want to create 2 columns for them).
另一方面,如果我将列计数更改为固定的整数,它会工作并平衡项目,但这不是动态的,因为我需要它。 (如果我只有2个元素,我不想为它们创建2列)。
Is there a way to have the height fixed, and the columns automatically added when the height is not enough to fit all the items?
有没有办法让高度固定,当高度不足以适应所有项目时,列会自动添加?
ul#list {
font-family: sans-serif;
list-style: none;
background: #dddddd;
max-height: 200px;
columns: auto auto;
-webkit-columns: auto auto;
-moz-columns: auto auto;
/** This works, but fixes the columns to 2, which is not what I want.
columns: 2 auto;
-webkit-columns: 2 auto;
-moz-columns: 2 auto;
*/
column-gap: 10px;
-webkit-column-gap: 10px;
-moz-column-gap: 10px;
column-rule: 1px solid black;
-webkit-column-rule: 1px solid rgba(100, 30, 30, 0.4);
-moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
}
li {
height: 20px;
padding: 2px;
}
<div id="outer">
<ul id="list">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
</div>
1 个解决方案
#1
6
First of all, to make CSS Columns work you have to set column-width
or column-count
. CSS Columns won't work if you doesn't set any of it.
首先,要使CSS列工作,您必须设置列宽或列数。如果您未设置任何CSS列,则无法使用CSS列。
If I understand right, you need to use column-fill property. Unfortunately, only Firefox supports it now. Check out this code snippet (Firefox only).
如果我理解正确,您需要使用column-fill属性。不幸的是,现在只有Firefox支持它。查看此代码段(仅限Firefox)。
ul#list {
font-family: sans-serif;
list-style: none;
background: #dddddd;
max-height: 200px;
/* Works only in Firefox! */
-moz-columns: 100px auto;
-moz-column-gap: 10px;
-moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
-moz-column-fill: auto;
}
li {
height: 20px;
padding: 2px;
}
<div id="outer">
<ul id="list">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
</div>
I think, you could use flex in your case. See example:
我想,你可以在你的情况下使用flex。见例子:
ul#list {
font-family: sans-serif;
list-style: none;
background: #dddddd;
height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
li {
height: 20px;
padding: 2px;
}
<div id="outer">
<ul id="list">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
</div>
#1
6
First of all, to make CSS Columns work you have to set column-width
or column-count
. CSS Columns won't work if you doesn't set any of it.
首先,要使CSS列工作,您必须设置列宽或列数。如果您未设置任何CSS列,则无法使用CSS列。
If I understand right, you need to use column-fill property. Unfortunately, only Firefox supports it now. Check out this code snippet (Firefox only).
如果我理解正确,您需要使用column-fill属性。不幸的是,现在只有Firefox支持它。查看此代码段(仅限Firefox)。
ul#list {
font-family: sans-serif;
list-style: none;
background: #dddddd;
max-height: 200px;
/* Works only in Firefox! */
-moz-columns: 100px auto;
-moz-column-gap: 10px;
-moz-column-rule: 1px solid rgba(100, 30, 30, 0.4);
-moz-column-fill: auto;
}
li {
height: 20px;
padding: 2px;
}
<div id="outer">
<ul id="list">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
</div>
I think, you could use flex in your case. See example:
我想,你可以在你的情况下使用flex。见例子:
ul#list {
font-family: sans-serif;
list-style: none;
background: #dddddd;
height: 200px;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: column wrap;
flex-flow: column wrap;
}
li {
height: 20px;
padding: 2px;
}
<div id="outer">
<ul id="list">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
<li>Item #4</li>
<li>Item #5</li>
<li>Item #6</li>
<li>Item #7</li>
<li>Item #8</li>
<li>Item #9</li>
<li>Item #10</li>
<li>Item #11</li>
<li>Item #12</li>
</ul>
</div>