淘先锋技术网

首页 1 2 3 4 5 6 7

CSS3 列布局 - 编程基础教程

CSS3多列布局允许我们轻松创建多列。

以下三个属性用于在CSS3中配置列布局。

  • column-count
  • column-gap
  • column-rule

设置列计数

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

上面的代码呈现如下：

设置列数


在CSS3中设置列之间的间隙

column-gap属性指定列之间的间距：

<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;
    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

上面的代码呈现如下：

间距


CSS3列规则

column-rule属性在列之间设置规则的宽度，样式和颜色。

.newspaper {
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px; 
    column-gap: 40px;
    -webkit-column-rule: 4px outset #ff00ff; 
    -moz-column-rule: 4px outset #ff00ff;
    column-rule: 4px outset #ff00ff;
}
完整代码如下：
<!DOCTYPE html>
<html>
<head>
<style> 
.newspaper {
    -webkit-column-count: 3;
    -moz-column-count: 3; 
    column-count: 3;
    -webkit-column-gap: 40px;
    -moz-column-gap: 40px; 
    column-gap: 40px;
    -webkit-column-rule: 4px outset #ff00ff; 
    -moz-column-rule: 4px outset #ff00ff;
    column-rule: 4px outset #ff00ff;
}
</style>
</head>
<body>

<div class="newspaper">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh 
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad 
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut 
aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit 
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla 
facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent 
luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber 
tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod 
mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus 
legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt 
lectores legere me lius quod ii legunt saepius.
</div>

</body>
</html>

例子

以下示例使用列布局来定位无序列表项。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul {margin-left: 5px;width: 250px;height: 100px;
  -webkit-column-count: 2;
  -khtml-column-count: 2;
  -moz-column-count: 2;
  -ms-column-count: 2;
  -o-column-count: 2;
  column-count: 2;
}

li {
  list-style: disc inside;
}
</style>
</head>
<body>
  <ul>
    <li>A</li><li>B</li><li>C</li><li>D</li>
    <li>E</li><li>F</li><li>G</li><li>H</li>
        <li>A</li><li>B</li><li>C</li><li>D</li>
    <li>E</li><li>F</li><li>G</li><li>H</li>    
  </ul>
</body>
</html>

上面的代码呈现如下：

定位无序列表项

属性描述CSS
column-count指定某个元素应分为的列数3
column-fill指定如何填充列3
column-gap指定的列之间的差距3
column-rule-color设置列之间的颜色3
column-rule-style设置列之间的样式3
column-rule-width设置列之间的宽度3
column-rule设置列之间的宽度，样式和颜色  
column-span指定某个元素应该跨越多少列3
column-width指定列的宽度3
columns速记属性设置列宽和列数3