如何使用 CSS 从一个列表中创建多个列?
列数必须根据媒体查询的屏幕宽度而变化,如下所示:
lage screen:
Row1 Row6 Row11
Row2 Row7 Row12
Row3 Row8 Row13
Row4 Row9 Row14
Row5 Row10
中间屏幕:
Row1 Row8
Row2 Row9
Row3 Row10
Row4 Row11
Row5 Row12
Row6 Row13
Row7 Row14
小屏幕:
Row1
Row2
Row3
Row4
Row5
Row6
Row7
Row8
Row9
Row10
Row11
Row12
Row13
Row14
这是我的 HTML 代码:
<ul>
<li>Row1</li>
<li>Row2</li>
<li>Row3</li>
<li>Row4</li>
<li>Row5</li>
<li>Row6</li>
<li>Row7</li>
<li>Row8</li>
<li>Row9</li>
<li>Row10</li>
<li>Row11</li>
<li>Row12</li>
<li>Row13</li>
<li>Row14</li>
</ul>
答案 0 :(得分:4)
您可以使用CSS multi-column layout
执行此操作。只是添加support
并不是最好的。
或者,如果您可以在ul
上设置固定高度,则可以使用 Flexbox 和flex-direction: column;
,例如 DEMO
,但不是真正“灵活”的解决方案。
ul {
-webkit-column-count: 3; /* Chrome, Safari, Opera */
-moz-column-count: 3; /* Firefox */
column-count: 3;
list-style-type: none;
}
@media(max-width: 992px) {
ul {
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
}
}
@media(max-width: 480px) {
ul {
-webkit-column-count: 1; /* Chrome, Safari, Opera */
-moz-column-count: 1; /* Firefox */
column-count: 1;
}
}
<ul>
<li>Row1</li>
<li>Row2</li>
<li>Row3</li>
<li>Row4</li>
<li>Row5</li>
<li>Row6</li>
<li>Row7</li>
<li>Row8</li>
<li>Row9</li>
<li>Row10</li>
<li>Row11</li>
<li>Row12</li>
<li>Row13</li>
<li>Row14</li>
</ul>
答案 1 :(得分:1)
您可以使用CSS columns结合media queries根据视口宽度更改列数。
在以下示例中,当视口宽度为700px时,列从3变为2;当视口宽度为500px时,列从2变为1。
请注意,您不需要为窄视口指定任何内容,因为一列显示是默认布局,并且仅从您调用的内容开始指定columns
&#34;中间屏幕& #34;:
@media (min-width: 500px){
ul{
-webkit-columns: 2;
-moz-columns: 2;
columns: 2;
}
}
@media (min-width: 700px){
ul{
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
}
}
&#13;
<ul>
<li>Row1</li>
<li>Row2</li>
<li>Row3</li>
<li>Row4</li>
<li>Row5</li>
<li>Row6</li>
<li>Row7</li>
<li>Row8</li>
<li>Row9</li>
<li>Row10</li>
<li>Row11</li>
<li>Row12</li>
<li>Row13</li>
<li>Row14</li>
</ul>
&#13;
请注意,columns属性需要供应商前缀以最大化浏览器支持,IE10 +支持它(canIuse上的更多信息)。
答案 2 :(得分:1)
这是一个简单的解决方案,但在旧浏览器上更受欢迎。
您可以通过调整LI的大小并将其显示为内联块来分割LI。
在这种情况下,当屏幕大于768px时,4列25%宽度,当屏幕小于768px时,2列。 (您可以根据需要添加任意数量的媒体查询)
li {
width: 25%;
display: inline-block;
margin: 0 -2px;
}
@media (max-width: 768px){
li{
width: 50%;
}
}
<ul>
<li>Row1</li>
<li>Row2</li>
<li>Row3</li>
<li>Row4</li>
<li>Row5</li>
<li>Row6</li>
<li>Row7</li>
<li>Row8</li>
<li>Row9</li>
<li>Row10</li>
<li>Row11</li>
<li>Row12</li>
<li>Row13</li>
<li>Row14</li>
</ul>