CSS3 を使用して幅が等しくない 2 列のレイアウトを作成するにはどうすればよいですか?

幅が等しくない複数列レイアウトの作成

CSS3 では、列プロパティを使用して複数列レイアウトを作成できます。ただし、個々の列の幅の制御は制限されています。

問題:

幅が等しくない 2 列レイアウトを実装し、1 つの列に 1 つの列を割り当てたいと考えています。 1つは幅20px、もう1つは幅80pxです。次のマークアップが使用されています:

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

回答:

残念ながら、CSS3 では列に異なる幅を指定する方法はありません。列プロパティは、同じ幅の列間でオーバーフローするコンテンツ用に設計されています。したがって、この機能を使用して、希望する不均等な列幅を実現することはできません。

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