CSS入门教程
CSS入门教程
    • 请登录查看
    阅读(3681)

    CSS3 列布局

    最后一次修改 2017年08月04日


    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


    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
    ← CSS3 动画
    没有了 →
    提交