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

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

总结

以上是内存溢出为你收集整理的html – 修复max-height时的CSS自动列数全部内容，希望文章能够帮你解决html – 修复max-height时的CSS自动列数所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。