column-width属性怎样用【css教程】,column-width,CSS3

column-width属性用于指定列的宽度；当没有明白指定元素的显现列数时，可通过该属性设置显现列数。

CSS3 column-width属性

作用：column-width属性用于指定列的宽度。

语法：

column-width: auto|length;

参数：

auto：由浏览器决议列宽；列宽的若干由其他要素决议，例：column-count属性设置的列数。

length：划定列的宽度。

申明：Internet Explorer 10 和 Opera 支撑 column-width 属性；Firefox 支撑替换的 -moz-column-width 属性；Safari 和 Chrome 支撑替换的 -webkit-column-width 属性；Internet Explorer 9 以及更早版本的浏览器不支撑 column-width 属性。

CSS3 column-width属性的运用示例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style> 
.auto
{
	-moz-column-count:3; /* Firefox */
	-webkit-column-count:3; /* Safari and Chrome */
	column-count:3;
	
	column-width:auto;
	-moz-column-width:auto; /* Firefox */
	-webkit-column-width:auto; /* Safari and Chrome */
}
.length1
{
	column-width:100px;
	-moz-column-width:100px; /* Firefox */
	-webkit-column-width:100px; /* Safari and Chrome */
}
.length2
{
	column-width:300px;
	-moz-column-width:300px; /* Firefox */
	-webkit-column-width:300px; /* Safari and Chrome */
}
</style>
</head>
<body>

<h3>column-width:auto;</h3>
<div class="auto">
当我年青的时刻，我妄想转变这个天下；当我成熟今后，我发明我不能够转变这个天下，我将眼光缩短了些，决议只转变我的国度；当我进入晚年今后，我发明我不能够转变我们的国度，我的末了希望仅仅是转变一下我的家庭，然则，这也不能够。当我如今躺在床上，风烛残年时，我倏忽意想到：假如一开始我仅仅去转变我本身，然后，我能够转变我的家庭；在家人的协助和勉励下，我能够为国度做一些事变；然后，谁知道呢?我以至能够转变这个天下。
</div>
<h3>column-width:100px;</h3>
<div class="length1">
当我年青的时刻，我妄想转变这个天下；当我成熟今后，我发明我不能够转变这个天下，我将眼光缩短了些，决议只转变我的国度；当我进入晚年今后，我发明我不能够转变我们的国度，我的末了希望仅仅是转变一下我的家庭，然则，这也不能够。当我如今躺在床上，风烛残年时，我倏忽意想到：假如一开始我仅仅去转变我本身，然后，我能够转变我的家庭；在家人的协助和勉励下，我能够为国度做一些事变；然后，谁知道呢?我以至能够转变这个天下。
</div>
<h3>column-width:300px;</h3>
<div class="length2">
当我年青的时刻，我妄想转变这个天下；当我成熟今后，我发明我不能够转变这个天下，我将眼光缩短了些，决议只转变我的国度；当我进入晚年今后，我发明我不能够转变我们的国度，我的末了希望仅仅是转变一下我的家庭，然则，这也不能够。当我如今躺在床上，风烛残年时，我倏忽意想到：假如一开始我仅仅去转变我本身，然后，我能够转变我的家庭；在家人的协助和勉励下，我能够为国度做一些事变；然后，谁知道呢?我以至能够转变这个天下。
</div>
</body>
</html>

效果图：