How Can I Create a Two-Column Layout with Unequal Widths Using CSS3?

Creating Multi-Column Layouts with Unequal Widths

In CSS3, the column property allows for the creation of multi-column layouts. However, it offers limited control over the widths of individual columns.

Problem:

You want to implement a two-column layout with unequal widths, giving one column a width of 20px and the other a width of 80px. The following markup is being used:

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

Answer:

Unfortunately, there is no way to specify different widths for columns in CSS3. The column property is designed for content that overflows between equal-width columns. Therefore, you cannot achieve the desired unequal column widths using this feature.

The above is the detailed content of How Can I Create a Two-Column Layout with Unequal Widths Using CSS3?. For more information, please follow other related articles on the PHP Chinese website!