css - 幅の異なる CSS 列

Question

私は CSS 列を使用しています。

HTML:

<div class="foo">
    <div class="content">

    </div>
</div>

CSS:

.content {
    column-count: 2;
}

ただし、を使用する場合は、列の幅を変えたいと思いますcolumn-width。

それはまったく可能ですか？パーセンテージを使用する方法もないと思いますか？

Answer 1

CSS 列で異なる列幅を設定する正しい方法はありません。

うまくいかない理由

column-widthプロパティのみが最適な幅を種付けします。最終的な出力は、利用可能な親の幅に基づいて拡大または縮小されます。したがって、固定または異なる列幅が必要な場合に使用する適切なプロパティではありません。元：

div {
  width: 100px;
  column-width: 40px;
}

幅 100 ピクセルの要素内に、幅 40 ピクセルの列を 2 つ配置できるスペースがあります。利用可能なスペースを埋めるために、実際の列幅は 50px に拡大されます。

div {
  width: 40px;
  column-width: 45px;
}

使用可能なスペースは、指定された列幅よりも小さいため、実際の列幅は縮小されます。

微調整

2 つの列がある場合は、-vemargin-rightを設定して異なる列幅を取得できます。これは 2 つ以上の列で機能しますが、幅は 2 つだけに制限されています。

実現可能なソリューション

tablesordisplay:tableを代わりに使用して、同様の結果を得ることができます。