我希望实现一个布局，其中一个元素（在我的例子中是一个<ul>) 当高度达到一定限制时扩展到 2（或更多）列。
例如，如果高度仅够容纳 3 个项目，而我有 5 个项目，则第 4 和第 5 个项目将转到第二列，该列仅在需要时创建。
我尝试通过设置来做到这一点max-height按照建议here https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multi-column_layouts#Height_Balancing with column-count and column-width set to auto通过columns（我也尝试单独设置它们，行为相同）。
另一方面，如果我改变column-count到一个固定的整数，它可以工作并平衡项目，但这不是我需要的动态的。 （如果我只有 2 个元素，我不想为它们创建 2 列）。
有没有办法固定高度，并在高度不足以容纳所有项目时自动添加列？
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>
首先，要使CSS 列你必须设置的工作column-width or column-count。 CSS 列行不通如果你没有设置任何一个。
如果我理解正确的话，你需要使用列填充 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill财产。不幸的是，现在只有 Firefox 支持它。看看这个代码片段 http://jsfiddle.net/sergdenisov/ynezw9nv/3/ (仅限火狐浏览器).
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>
我想，你可以使用flex https://developer.mozilla.org/ru/docs/Web/CSS/flex在你的情况下。看example http://jsfiddle.net/sergdenisov/60hvd7wq/2/:
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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
