如何使用CSS从一个列表中创建多个列?
使用媒体查询时,列数必须根据屏幕宽度而变化,如下所示:
拉格屏幕:
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>
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>
您可以将 CSS 列与媒体查询结合使用,以根据视口宽度更改列数。
在以下示例中,当视区宽度为 700px 时,列从 3 更改为 2,当视区宽度为 500px 时,列从 2 更改为 1。
请注意,您无需为窄视口指定任何内容,因为单列显示是默认布局,并且仅指定从所谓的"中间屏幕"开始columns
:
@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;
}
}
<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>
请注意,列属性需要供应商前缀以最大化浏览器支持,IE10+ 支持它(有关 canIuse 的详细信息)。
这是一个简单的解决方案,但在旧浏览器上更容易被接受。
您可以通过调整 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>