根据视口宽度列出列布局

Question

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

Answer 1

你可以这样做 CSS multi-column layout. Just to add support 不是最好的。

或者如果您可以在 ul 上设置固定高度，您可以像这样使用 Flexbox 和 flex-direction: column; DEMO 但它不是真正的 "flexible" 解决方案。

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>

Answer 2

您可以使用 CSS columns combined with media queries 根据视口宽度更改列数。

在以下示例中，当视口为 700 像素宽时，列从 3 变为 2，当视口为 500 像素宽时，列从 2 变为 1。
请注意，您不需要为窄视口指定任何内容，因为一列显示是默认布局，只需指定 columns 从您所谓的 "middle screen" 开始:

@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 的更多信息）。

Answer 3

这是一个简单的解决方案，但在旧浏览器上更容易接受。

您可以通过调整它们的大小并将它们显示为 inline-block 来划分 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>

根据视口宽度列出列布局

List in columns layout depending on viewport width

html

css

responsive-design

css-multicolumn-layout