目录
多列布局的属性：
| 属性 | 说明 |
| column-count | 指定列数 |
| column-width | 指定列宽 |
| columns | column-width和column-count的简写 |
| column-gap | 指定列之间的间距 |
| column-fill | 指定内容在列与列之间的分布方式 |
| column-span | 指定元素横向能跨多少列 |
| column-rule-color | 指定列之间的颜色 |
| column-rule-style | 指定列之间的样式 |
| column-rule-width | 指定列之间的宽度 |
| column-rule | column-rule-color、column-rule-style和column-rule-width的简写 |
1.column-count：指定列数
例子1：两列布局演示（有中间空隙）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现两列布局</title>
<style type="text/css">
/*不使用float实现两列办局*/
div.two{
column-count: 2;
}
div.left{
background-color: beige;
padding: 20px;
box-sizing: border-box;
}
div.right{
background-color: aliceblue;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>两列布局演示</h1>
<div class="two">
<div class="left">
<h2>左侧</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque commodi aliquam saepe eaque dolor aliquid voluptate corrupti est repudiandae quibusdam sint atque. Laborum amet voluptas nesciunt consectetur ullam assumenda sed.</p>
</div>
<div class="right">
<h2>右侧</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae mollitia omnis sunt minus recusandae sequi et id ipsam ad. Facere autem similique porro et veritatis quas incidunt earum facilis distinctio.</p>
</div>
</div>
</body>
</html>
例子2：多列布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现多列布局</title>
<style type="text/css">
/*将P拆分成5列*/
div.column{
column-count: 5;
}
</style>
</head>
<body>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci vero voluptatum nulla similique animi nihil eos quas at et incidunt culpa quam magnam quasi aut totam nesciunt perferendis molestiae tempora.</p>
</div>
</body>
</html>
2.column-gap：指定的列之间的差距
例子3：两列布局（无中间空隙）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现两列布局</title>
<style type="text/css">
/*不使用float实现两列办局*/
div.two{
column-count: 2;
column-gap: 0;/*消除中间空隙*/
}
div.left{
background-color: beige;
padding: 20px;
box-sizing: border-box;
}
div.right{
background-color: aliceblue;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>两列布局演示</h1>
<div class="two">
<div class="left">
<h2>左侧</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque commodi aliquam saepe eaque dolor aliquid voluptate corrupti est repudiandae quibusdam sint atque. Laborum amet voluptas nesciunt consectetur ullam assumenda sed.</p>
</div>
<div class="right">
<h2>右侧</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae mollitia omnis sunt minus recusandae sequi et id ipsam ad. Facere autem similique porro et veritatis quas incidunt earum facilis distinctio.</p>
</div>
</div>
</body>
</html>
3.column-rule：设置列之间的宽度，样式和颜色
column-rule-color：指定列之间的颜色
column-rule-style：指定列之间的样式
column-rule-width：指定列之间的宽度
例子4：列间样式设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现两列布局</title>
<style type="text/css">
/*不使用float实现两列办局*/
div.two{
column-count: 2;
column-gap: 20px;/*指定中间空隙*/
column-rule-color: pink;
column-rule-style: solid;
column-rule-width: 5px;
}
div.left{
background-color: beige;
padding: 20px;
box-sizing: border-box;
}
div.right{
background-color: aliceblue;
padding: 20px;
box-sizing: border-box;
}
</style>
</head>
<body>
<h1>两列布局演示</h1>
<div class="two">
<div class="left">
<h2>左侧</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque commodi aliquam saepe eaque dolor aliquid voluptate corrupti est repudiandae quibusdam sint atque. Laborum amet voluptas nesciunt consectetur ullam assumenda sed.</p>
</div>
<div class="right">
<h2>右侧</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae mollitia omnis sunt minus recusandae sequi et id ipsam ad. Facere autem similique porro et veritatis quas incidunt earum facilis distinctio.</p>
</div>
</div>
</body>
</html>
4.column-width：指定列的宽度
例子5：限制最小列宽度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>实现多列布局</title>
<style type="text/css">
div.column{
/*限制最小宽度*/
column-width: 300px;
-moz-column-width:300px; /* Firefox */
-webkit-column-width:300px; /* Safari and Chrome */
}
</style>
</head>
<body>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium veritatis ea aliquid rem beatae totam repudiandae rerum atque quibusdam temporibus amet eius? Hic a amet dolore doloremque ad quaerat excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nostrum quam laboriosam delectus earum sint neque laudantium omnis quae tempora rerum hic ipsa dolorem molestiae perspiciatis. Obcaecati asperiores architecto ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita corporis illo enim similique reiciendis perspiciatis voluptas magni numquam obcaecati voluptatem laboriosam officiis voluptate libero esse odit alias ipsam nihil.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci vero voluptatum nulla similique animi nihil eos quas at et incidunt culpa quam magnam quasi aut totam nesciunt perferendis molestiae tempora.
</div>
</body>
</html>
5.column-span：指定横跨列数
column-span:1;元素应跨越一列
column-span:all;该元素应该跨越所有列
例子6：无column-span时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>column-span</title>
<style>
#myDIV{
column-count:3;
-webkit-column-count:3; /* 针对 Chrome 和 Safari 的代码 */
-moz-column-count:3; /* 针对 Firefox 的代码 */
}
</style>
</head>
<body>
<p> 如何使H2元素横跨所有列：</p>
<div id="myDIV">
<h2 id="myH2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos explicabo molestias hic minus voluptatem perspiciatis impedit dolor aliquam maiores cumque modi dolorem nisi? Amet numquam vero error ullam minima alias?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus fuga reiciendis voluptatum modi iste nobis consectetur velit similique explicabo totam iusto vel cumque fugit. Qui dignissimos fuga nobis sed quo?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aspernatur similique minima aperiam nemo repellat sit odio adipisci iure voluptatum nulla ipsam ipsa animi voluptatibus culpa doloribus repellendus quisquam molestiae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsa atque suscipit cupiditate quam ullam fugit eius fugiat similique modi officia voluptas voluptate blanditiis impedit quod tenetur recusandae deserunt optio.
</div>
</body>
</html>
例子7：有column-span:all，h2标题跨所有列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>column-span</title>
<style>
#myDIV{
column-count:3;
-webkit-column-count:3; /* 针对 Chrome 和 Safari 的代码 */
-moz-column-count:3; /* 针对 Firefox 的代码 */
}
h2{
column-span:all;/*使h2跨整行*/
}
</style>
</head>
<body>
<p> 如何使H2元素横跨所有列：</p>
<div id="myDIV">
<h2 id="myH2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</h2>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos explicabo molestias hic minus voluptatem perspiciatis impedit dolor aliquam maiores cumque modi dolorem nisi? Amet numquam vero error ullam minima alias?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus fuga reiciendis voluptatum modi iste nobis consectetur velit similique explicabo totam iusto vel cumque fugit. Qui dignissimos fuga nobis sed quo?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque aspernatur similique minima aperiam nemo repellat sit odio adipisci iure voluptatum nulla ipsam ipsa animi voluptatibus culpa doloribus repellendus quisquam molestiae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ipsa atque suscipit cupiditate quam ullam fugit eius fugiat similique modi officia voluptas voluptate blanditiis impedit quod tenetur recusandae deserunt optio.
</div>
</body>
</html>
6.columns：设置列宽和列数
columns: column-width column-count;
例子8：设置列宽和列数
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>列宽和列数</title>
<style type="text/css">
/*列宽和列数*/
div.column{
columns: 300px 3;
-moz-columns:300px 3; /* Firefox */
-webkit-columns:300px 3; /* Safari and Chrome */
}
</style>
</head>
<body>
<div class="column">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium veritatis ea aliquid rem beatae totam repudiandae rerum atque quibusdam temporibus amet eius? Hic a amet dolore doloremque ad quaerat excepturi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam nostrum quam laboriosam delectus earum sint neque laudantium omnis quae tempora rerum hic ipsa dolorem molestiae perspiciatis. Obcaecati asperiores architecto ea.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem expedita corporis illo enim similique reiciendis perspiciatis voluptas magni numquam obcaecati voluptatem laboriosam officiis voluptate libero esse odit alias ipsam nihil.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci vero voluptatum nulla similique animi nihil eos quas at et incidunt culpa quam magnam quasi aut totam nesciunt perferendis molestiae tempora.
</div>
</body>
</html>
7.column-fill：指定如何填充列
| 值 | 描述 |
|---|---|
| balance | 对列进行协调。浏览器应对列长度的差异进行最小化处理。 |
| auto | 按顺序对列进行填充，列长度会各有不同。 |
例子9：填充列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>填充列</title>
<style type="text/css">
.balance{
column-count: 3;
column-fill: balance;
background-color: beige;
height: 200px;
}
.auto{
column-count: 3;
column-fill: auto;
background-color: aliceblue;
height: 200px;
}
h2{
column-span: all;
}
</style>
</head>
<body>
<div class="balance">
<h2>column-fill:balance的演示</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo nesciunt beatae officiis cupiditate consequuntur alias sunt quisquam et enim commodi dicta eligendi optio repudiandae officia odit nisi harum repellat deserunt?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo consequuntur velit earum optio quod soluta vero ea nesciunt. Recusandae voluptatum laudantium reiciendis accusantium iusto blanditiis adipisci quod voluptas tempora alias.</p>
</div>
<div class="auto">
<h2>column-fill:auto的演示</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis sit dolorem reiciendis sequi maiores rerum vitae doloribus omnis iste magni aperiam quasi assumenda neque aliquid excepturi quos vero adipisci necessitatibus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo consequuntur velit earum optio quod soluta vero ea nesciunt. Recusandae voluptatum laudantium reiciendis accusantium iusto blanditiis adipisci quod voluptas tempora alias.</p>
</div>
</body>
</html>
143
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
