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

发布时间：2020-12-14 16:34:07 所属栏目：资源来源：网络整理

导读：我希望实现一种布局,其中当高度达到某个限制时,元素(在我的情况下是 ul)扩展到2(或更多)列. 因此,例如,如果高度仅适用于3个项目,而我有5个,则第4个和第5个项目将转到第二个列,仅在需要时创建. 我尝试通过设置最大高度为建议here,列数和列宽设置为自动通过列(

我希望实现一种布局,其中当高度达到某个限制时,元素(在我的情况下是< 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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!