column-width

版本： CSS3

column-width CSS属性建议一个最佳列宽。列宽是在添加另一列之前列将成为最大宽度。

示例

/* keyword value */
column-width: auto;

/* different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

/* global values */
column-width: inherit;
column-width: initial;
column-width: unset;

column-width: auto;

/* different <length> values */
column-width: 6px;
column-width: 25em;
column-width: 0.3vw;

column-width: inherit;

浏览器支持

IE10以上版本的浏览器都支持 column-width

语法

column-width : auto | <length>

取值：

• auto ：列的宽度由其他CSS属性决定，例如 column_count 。
• <length> ：指示最佳列宽。实际列宽可能与指定的值不同：当需要填充可用空间时，列宽可能会更宽；当可用空间太小时，列宽可能会变窄。值必须严格为正，否则声明无效。百分比值也无效。

例子

<style>
.content-box {
	width:20%;
	padding:20px;
	border: 10px solid #000000;
	column-width:100px;
	-moz-column-width:100px;/*firefox*/
	-webkit-column-width:100px;/*safari and chrome*/
}
.content-box .items
{
	border:1px solid #ff6633;
	padding:10px;
}
</style>

<h3>效果：</h3>
<div class="content-box">
	<p class="items">第一列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第二列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第三列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第四列文字部分：内容内容内容内容内容内容</p>
	<p class="items">第五列文字部分：内容内容内容内容内容内容</p>
</div>