CSS3 で異なる幅の列を作成するにはどうすればよいですか?

CSS3 での異なる列幅の指定

CSS3 の複数列レイアウトは、複数列レイアウトを作成する便利な方法を提供しますが、そうではありません。さまざまな列幅を指定できます。

この例では、1 つの列の幅が 20 ピクセル、もう 1 つの列の幅が 80 ピクセルである 2 列のレイアウトが必要です。

<code class="css"><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" style="">picture box</div>
    <div id="nme">name</div>
</div></code>

これは次のとおりです。不可能です。 -webkit-column-width プロパティは、すべての列の幅を均等に設定します。この制限の理由は、複数列レイアウト機能が、一貫性とバランスの取れたレイアウトを維持しながら、等しい列間を流れるコンテンツ向けに設計されているためです。

したがって、目的の効果を達成するには、複数の列を使用するなどの代替アプローチが必要です。 div または float 手法の方が適切な場合があります。

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