2

CSSを使用して 1 つのリストから複数の列を作成するにはどうすればよいですか? 列の数は、次のように、メディア クエリを使用した画面の幅に応じて変更する必要があります。

ラグスクリーン:

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は最適ではありません。

または、固定の高さを設定できる場合は、 Flexboxをul使用してこのようにすることもできますが、実際には「柔軟な」ソリューションではありません。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 を分割できます。

この場合、画面が 768px より大きい場合は 4 列、画面が 768px より小さい場合は 2 列で、それぞれ 25% の幅になります。(メディアクエリはいくつでも追加できます)

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 列を使用して、ビューポートの幅に基づいて列数を変更できます。

次の例では、ビューポートの幅が 700px の場合は列が 3 から 2 に変更され、ビューポートの幅が 500px の場合は列が 2 から 1 に変更されます。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 に答える