小编Ser*_*nko的帖子

根据视口宽度以列布局列出

如何使用CSS一个列表中创建多列? 列数必须根据媒体查询的屏幕宽度而变化,如下所示:

大屏幕:

Row1 Row6  Row11
Row2 Row7  Row12
Row3 Row8  Row13
Row4 Row9  Row14
Row5 Row10
Run Code Online (Sandbox Code Playgroud)

中间屏幕:

Row1 Row8
Row2 Row9
Row3 Row10
Row4 Row11
Row5 Row12
Row6 Row13
Row7 Row14
Run Code Online (Sandbox Code Playgroud)

小屏幕:

Row1
Row2
Row3
Row4
Row5
Row6
Row7
Row8
Row9
Row10
Row11
Row12
Row13
Row14
Run Code Online (Sandbox Code Playgroud)

这是我的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>
Run Code Online (Sandbox Code Playgroud)

html css responsive-design css-multicolumn-layout

2
推荐指数
1
解决办法
1165
查看次数