CSS多列布局

来源：互联网发布：mac 可以当修容的眼影编辑：程序博客网时间：2024/06/13 04:31

效果：

index.html

    <h1>我的爸爸

<!DOCTYPE html><html lang="zh-cn"><head><title>CSS3多列布局</title><meta charset="utf-8"><link rel="stylesheet" type="text/css" href="style.css"></head><body>    <!-- <h1>我的爸爸</h1> --><div>    <h1>我的爸爸</h1>    <h3>第一段内容</h3><p>我的爸爸刚刚30出头，他的面容，要比他的年龄，成熟稳重的多，但是，他可没有苍老憔悴哦！爸爸的身高有180公分，体重75公斤，是个标准的型男身材。如果，我说我爸爸是个大帅哥，可一点也没有撒谎呢！</p><h3>第二段内容</h3><p>爸爸不仅，打篮球a非常的棒，他的歌声，那也是非常的了得。从我记事的时候开始，每当过年的时候，我们家的亲戚，包括七大姑八大姨，都会团聚在一起，吃一顿团圆饭。在吃过团圆饭之后，那场面才叫一个劲爆热闹。大家都围坐在一起，开始K歌。就是因为，爸爸喜欢唱歌，所以，我们家就置办了，音响的整套设备。所以，大家也就不用去KTV，坐在家里就可以，比赛唱歌了。大家，你唱一曲，我唱一首，不唱到天亮，誓不罢休。</p><h3>第三段内容</h3><p>在我们小区里，就组建了一个篮球队，爸爸，可是他那队里的佼佼者呢！每当，我们小区和其他小区，有篮球比赛的时候，永远都不会少了爸爸的身影。爸爸可是个投三分球的高手。</p><h3>第四段内容</h3><p>爸爸剪了当下最流行的一款发式——毛寸。怎么样？说到这里，我的爸爸是不是一个十足的大帅哥？呵呵，我可是这么认为的。</p><h3>第五段内容</h3><p>爸爸长了一张国字脸，脸上的五官，分布得特别的整齐、匀称。两道乌黑浓密的眉毛，一对儿亮晶晶闪闪发光的大眼睛，两个眼珠黑白分明，还是双眼皮。那高高的鼻梁，坚实而挺拔。长了一个不大不小，刚刚合适的嘴。</p></div></body></html>

style.css

@charset "utf-8";div{/*-moz-columns: auto 3;*//*150是最小列宽*//*-moz-columns:150px 3;*//*如果没有设置列数，却设置了每列多少宽度，那么会自动设置列数*/-webkit-column-width:150px;-webkit-column-count:3;/*栏间距*/-webkit-column-gap:50px;/*栏之间分割线，自适应，与边框用法一样*/-webkit-column-rule:2px dashed gray;}h1{text-align:center;-webkit-column-span:all;}

总结：

0 0