CSS3 column-width 属性

column-width 属性用于指定多列布局中每列的最小宽度。通常与 column-count 属性一起使用，用于控制多列文本的布局。

语法

column-width: <length> | auto;

• <length>：指定每列的宽度，可以使用像素（px）、百分比（%）等单位。
• auto：默认值，浏览器根据内容自动计算列宽度。

示例

/* 将内容分为3列，每列宽度为200px */
div {
  column-count: 3;
  column-width: 200px;
}

在上面的示例中，div 元素被分为3列，并且每列的宽度被设置为200像素。可以根据具体需求调整列的宽度，以实现更灵活的布局效果。

注意事项

• 如果同时设置了 column-width 和 column-count 属性，浏览器会根据两者的值自动调整列的宽度，以保证布局的合理性。
• 当设置 column-width 时，如果内容长度超过列宽度，浏览器会自动调整布局，将内容放入下一列或下一行以保证内容的完整性。

column-width 属性在多列布局中起着重要作用，可以根据具体需求灵活控制列的宽度，实现更加美观和易读的页面布局效果。