How Can I Create Columns with Different Widths in CSS3?

Specifying Different Column Widths in CSS3

While CSS3's multi-column layout provides a convenient way to create multi-column layouts, it does not allow for the specification of different column widths.

In the provided example, where a two-column layout is desired with one column 20px wide and the other 80px wide:

<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>

This is not possible. The -webkit-column-width property sets the width of all columns equally. The reason for this limitation is that the multi-column layout feature is designed for content that flows between equal columns, maintaining a consistent and balanced layout.

Therefore, to achieve the desired effect, alternative approaches such as using multiple divs or float techniques may be more appropriate.

The above is the detailed content of How Can I Create Columns with Different Widths in CSS3?. For more information, please follow other related articles on the PHP Chinese website!