CSS3で列に異なる幅を設定できますか?

CSS3 での列幅のカスタマイズ

質問:

CSS3 で列に異なる幅を指定することは可能ですか?

ディスカッション:

CSS3 では、column-width プロパティは複数列レイアウトの複数の列の幅を設定します。ただし、すべての列に対して定義できる値は 1 つだけです。これは、すべての列が同じ幅になることを意味します。

例:

2 列レイアウトの次の HTML マークアップを考えてみましょう:

<code class="html"><div style="-webkit-column-count: 2;
            -webkit-column-rule: 1px solid black;
            -webkit-column-width: 80px;
             margin-left:20px;margin-top:20px;">
    <div id="picturebox">picture box</div>
    <div id="nme">name</div>
</div></code>

この例では、「画像ボックス」と「名前」の div は両方とも同じ幅 80 ピクセルになります。

答え:

いいえ、 CSS3 では列に異なる幅を指定することはできません。

column-width プロパティは、等しい列間で均等に流れるコンテンツ用に設計されています。列に異なる幅を割り当てると、コンテンツの流れが中断され、一貫性のないレイアウトが作成されます。

以上がCSS3で列に異なる幅を設定できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。