html – 修复max-height时的CSS自动列数

我希望实现一种布局,其中当高度达到某个限制时,元素(在我的情况下是< ul>)扩展到2(或更多)列.

因此,例如,如果高度仅适用于3个项目,而我有5个,则第4个和第5个项目将转到第二个列,仅在需要时创建.

我尝试通过设置最大高度为建议here,列数和列宽设置为自动通过列(我尝试单独设置它们,相同的行为).

另一方面,如果我将列计数更改为固定的整数,它会工作并平衡项目,但这不是动态的,因为我需要它. (如果我只有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,0.4);
  -moz-column-rule: 1px solid rgba(100,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列工作,您必须设置列宽或列数.如果您未设置任何CSS列,则无法使用CSS列.

如果我理解正确,您需要使用column-fill属性.不幸的是,现在只有Firefox支持它.看看这个code snippet(仅适用于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,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.见example：

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>

原文地址：https://www.jb51.cc/html/227472.html