2

如何使用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>
4

3 回答 3

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>

于 2016-01-28T09:48:26.850 回答
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>

于 2016-01-28T09:51:31.603 回答
1

您可以结合使用CSS 列和媒体查询来根据视口宽度更改列数。

在以下示例中，当视口为 700 像素宽时，列从 3 变为 2，当视口为 500 像素宽时，列从 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>

请注意，该 columns 属性需要供应商前缀以最大化浏览器支持，它受 IE10+ 支持（有关canIuse的更多信息）。

于 2016-01-28T09:49:26.783 回答