如何在 CSS3 中创建不同宽度的列？

在 CSS3 中指定不同的列宽

虽然 CSS3 的多列布局提供了一种创建多列布局的便捷方法，但它并没有允许指定不同的列宽。

在提供的示例中，需要两列布局，一列宽 20 像素，另一列宽 80 像素：

<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 或浮动技术可能更合适。

以上是如何在 CSS3 中创建不同宽度的列？的详细内容。更多信息请关注PHP中文网其他相关文章！