いくつかの行に均等に分割されたULを持たせる方法

Question

私はブロックで順序付けられていないリストを持っています。簡略化されたコードは、次のようになります。

<ul style="list-style-type: none;"> 
<li style=" float:left"><table style="width:200px; height:200px">[blockcontent]</table></li> 
<li style=" float:left"><table style="width:200px; height:200px">[blockcontent]</table></li> 
etc. 
</ul> 

これは、スペースがあるように行に多くのブロックを表示します。ワイドページでは、5つのブロックが連続している可能性があります。その後、次の行にスキップします。ページが小さければブロックの数を4,3,2に減らし、最終的に1になります。非常に基本的なレスポンシブルデザイン。

この「浮動小数点：left」は、すべてをページの左側に配置するという問題があります。私はそれをページの幅に均等に広げたいと思っています。

私がインターネット上で見つけた解決策は、すべて非常に複雑です。私は、この種の問題に対して最もシンプルでエレガントな解決策が何であるかを知りたいと思います。

これらのテーブルは、内部部品を注文するためのテーブルです。外側のために、それらはdivsであるかもしれない200x200のちょうど固定されたブロックです。彼らは決して小さくも大きくもありません。問題はそれらの間のスペースについてです。

Answer 1

次の設定を使用してulフレックスコンテナを作ることができます：あなたが探しているものを

を（が、この場合には山車を削除）

ul { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
} 
 

 
li { 
 
    background: #ddd; 
 
    margin-top: 2px; 
 
}

<ul style="list-style-type: none;"> 
 
    <li> 
 
    <table style="width:200px; height:200px">[blockcontent]</table> 
 
    </li> 
 
    <li> 
 
    <table style="width:200px; height:200px">[blockcontent]</table> 
 
    </li> 
 
    <li> 
 
    <table style="width:200px; height:200px">[blockcontent]</table> 
 
    </li> 
 
    <li> 
 
    <table style="width:200px; height:200px">[blockcontent]</table> 
 
    </li> 
 
    <li> 
 
    <table style="width:200px; height:200px">[blockcontent]</table> 
 
    </li> 
 
    <li> 
 
    <table style="width:200px; height:200px">[blockcontent]</table> 
 
    </li> 
 
</ul>

Answer 2

することができ達成しましたflexbox

インラインスタイルを削除してください。

ここでテーブルを使用する必要はありません。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box 
 
} 
 

 
ul { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    list-style: none; 
 
    justify-content:center /* or space-between or space-around*/ 
 
} 
 

 
li { 
 
    flex: 0 200px; 
 
    height: 200px; 
 
    margin: 10px; 
 
    border: 1px solid red; 
 
}

<ul> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 
    <li>[blockcontent]</li> 
 

 
</ul>

Answer 3

ちょうどあなたのULにCSSの列を追加し、列幅とそれを制御します。 li上

ul { 
column-width: 200px; 
column-fill: balance; 
} 
li { break-inside: avoid; } 

break-inside: avoid;列を壊すからliのを防ぐことができます。

フィドル遊び場：https://jsfiddle.net/nc4ah4ta/

スニペット：

ul { 
 
column-width: 200px; 
 
column-fill: balance; 
 
} 
 
li { break-inside: avoid; } 
 
table { border: 1px solid #ddd; }

<ul style="list-style-type: none;"> 
 
<li><table style="width:200px; height:200px">[blockcontent]</table></li> 
 
<li><table style="width:200px; height:200px">[blockcontent]</table></li> 
 
<li><table style="width:200px; height:200px">[blockcontent]</table></li> 
 
<li><table style="width:200px; height:200px">[blockcontent]</table></li> 
 
<li><table style="width:200px; height:200px">[blockcontent]</table></li> 
 
</ul>

---

あなただけのブロックを作成するためのテーブルを使用している場合は、その必要はありません。 fの人行為。

スニペット：

ul { 
 
column-width: 200px; 
 
column-fill: balance; 
 
} 
 
li { break-inside: avoid; padding: 12px; }

<ul style="list-style-type: none;"> 
 
<li>[blockcontent]</li> 
 
<li>[blockcontent]</li> 
 
<li>[blockcontent]</li> 
 
<li>[blockcontent]</li> 
 
<li>[blockcontent]</li> 
 
</ul>

---

ますが、列の数を制御するcolumn-countを使用してレイアウトを微調整することができます。これは、メディアクエリと連携して、応答性をさらに洗練させることができます。

column-gapでは、列間のギャップの幅を定義できます。

およびcolumn-ruleでは、列間に区切り記号を付けることができます。