css3新特性多栏布局 |css实现手风琴

在CSS2中，大家只能使用浮动或定位实现多栏布局。这种方法虽然可行，但是需要一些繁琐的计算和调整。而CSS3中的多栏布局就简单得多。

/*设置多栏布局*/
div {
column-count: 3; /*设置3列*/
column-gap: 20px; /*设置列间距为20px*/
}

以上代码就可以实现一个三栏布局，每列之间间隔20px。如果需要设置列宽，可以使用column-width属性。

div {
column-count: 3; /*设置3列*/
column-gap: 20px; /*设置列间距为20px*/
column-width: 100px; /*设置列宽为100px*/
}

大家还可以使用column-rule属性为每列添加边框。

div {
column-count: 3; /*设置3列*/
column-gap: 20px; /*设置列间距为20px*/
column-width: 100px; /*设置列宽为100px*/
column-rule: 2px dotted #333; /*添加边框*/
}

以上代码会为每列添加一条2px宽的虚线边框，颜色为#333。

多栏布局不仅可以应用于div元素，也可以应用于文本。只需将p元素设置为多栏布局，就可以实现类似报纸的排版效果。

p {
column-count: 2; /*设置2列*/
column-gap: 30px; /*设置列间距为30px*/
column-rule: 1px solid #ccc; /*添加边框*/
}

以上代码会将一段文本分为两列，并且每列之间间隔30px，边框为1px实线，颜色为#ccc。

总的来说，CSS3的多栏布局让大家可以更轻松地实现复杂的排版效果，而不需要过多的计算和调整。希望你们也会喜欢这个新特性。