CSS3多列布局

CSS3多列布局屬性

定義列數(shù)column-count

在CSS3的多列布局中盈蛮，我們可以使用column-count屬性指定多列布局的列數(shù)瓶盛，而不需要通過列寬度等來調(diào)整列數(shù)
- 語法：column-count: auto/正整數(shù);
- 說明：column-count有2個屬性值，一個是auto删壮，另外一個是正整數(shù)（如1、2、3）
  
  column-count屬性取值
舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>CSS3 column-count屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            column-count:3;
            -webkit-column-count:3;
            -moz-column-count:3;
            -o-column-count:3;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了销钝，有再來的時候；楊柳枯了咏闪，有再青的時候曙搬；桃花謝了，有再開的時 候鸽嫂。但是纵装，聰明的，你告訴我据某，我們的日子為什么一去不復(fù)返呢橡娄？——是有人偷了他們罷：那是誰？又藏在何處呢癣籽？是他們自己逃走了罷——如今又到了哪里呢挽唉？</p>
    <p>……</p>
    <p>在逃去如飛的日子里，在千門萬戶的世界里的我能做些什么呢筷狼？只有徘徊罷了瓶籽，只有匆匆罷了；在八千多日的匆匆里埂材，除徘徊外塑顺，又剩些什么呢？過去的日子如輕煙俏险，被微風(fēng)吹散了严拒，如薄霧，被初陽蒸融了竖独；我留著些什么痕跡呢裤唠？我何曾留著像游絲樣的痕跡呢？我赤裸裸來到這世界莹痢，轉(zhuǎn)眼間也將赤裸裸的回去罷种蘸？但不能平的墓赴，為什么偏要白白走這一遭啊劈彪？</p>
    <p>你聰明的竣蹦，告訴我，我們的日子為什么一去不復(fù)返呢沧奴？</p>
</body>
</html>

在瀏覽器預(yù)覽效果

分析：在這里對body設(shè)置了一定寬度痘括，并且使用“column-count:3;”使得body會自動以最恰當(dāng)?shù)姆绞椒譃?code>3列

定義列寬column-width

在CSS3的多列布局中，我們可以使用column-width屬性定義多列布局中每一列的寬度滔吠。
- 語法：column-width：auto/長度值;
- 說明：column-width有2個屬性值：1個是auto纲菌，另外1個是長度值
  
  column-width屬性取值
舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>定義列寬column-width屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-width:150px;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了，有再來的時候疮绷；楊柳枯了翰舌，有再青的時候；桃花謝了冬骚，有再開的時 候椅贱。但是，聰明的只冻，你告訴我庇麦，我們的日子為什么一去不復(fù)返呢？——是有人偷了他們罷：那是誰喜德？又藏在何處呢山橄？是他們自己逃走了罷——如今又到了哪里呢？</p>
    <p>我不知道他們給了我多少日子舍悯，但我的手確乎是漸漸空虛了航棱。在默默里算著，八千多日子已經(jīng)從我手中溜去萌衬，像針尖上一滴水滴在大海里饮醇，我的日子滴在時間的流里，沒有聲音秕豫，也沒有影子驳阎。我不禁頭涔涔而淚潸潸了。</p>
    <p>……</p>
    <p>在逃去如飛的日子里馁蒂，在千門萬戶的世界里的我能做些什么呢？只有徘徊罷了蜘腌，只有匆匆罷了沫屡；在八千多日的匆匆里，除徘徊外撮珠，又剩些什么呢沮脖？過去的日子如輕煙金矛，被微風(fēng)吹散了，如薄霧勺届，被初陽蒸融了驶俊；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢免姿？我赤裸裸來到這世界饼酿，轉(zhuǎn)眼間也將赤裸裸的回去罷？但不能平的胚膊，為什么偏要白白走這一遭肮世？</p>
    <p>你聰明的紊婉，告訴我药版，我們的日子為什么一去不復(fù)返呢？</p>
</body>
</html>

在瀏覽器預(yù)覽效果

分析：這里使用“width:400px”限定了body寬度為400px喻犁，然后使用“column-width:150px;”定義列寬為150px槽片，這樣body就會自動根據(jù)容器寬度、列寬以及內(nèi)容多少來計算列數(shù)

列間距column-gap

在CSS3多列布局中肢础，我們可以使用column-gap屬性定義列與列之間的間距（列間距）还栓。
- 語法：column-gap：取值;
- 說明：column-gap有2個屬性值：一個是normal，另外一個是長度值
  
  在瀏覽器預(yù)覽效果

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列間距column-gap屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-count:2;
            -webkit-column-gap:20px;    /*定義列間距為20px*/
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
            background-color:#F1F1F1;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了乔妈，有再來的時候蝙云；楊柳枯了，有再青的時候路召；桃花謝了勃刨，有再開的時 候。但是股淡，聰明的身隐，你告訴我，我們的日子為什么一去不復(fù)返呢唯灵？——是有人偷了他們罷：那是誰贾铝？又藏在何處呢？是他們自己逃走了罷——如今又到了哪里呢埠帕？</p>
    <p>我不知道他們給了我多少日子垢揩，但我的手確乎是漸漸空虛了。在默默里算著敛瓷，八千多日子已經(jīng)從我手中溜去叁巨，像針尖上一滴水滴在大海里，我的日子滴在時間的流里呐籽，沒有聲音锋勺，也沒有影子蚀瘸。我不禁頭涔涔而淚潸潸了。</p>
    <p>……</p>
    <p>在逃去如飛的日子里庶橱，在千門萬戶的世界里的我能做些什么呢贮勃？只有徘徊罷了，只有匆匆罷了苏章；在八千多日的匆匆里寂嘉，除徘徊外，又剩些什么呢布近？過去的日子如輕煙垫释，被微風(fēng)吹散了，如薄霧撑瞧，被初陽蒸融了棵譬；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢预伺？我赤裸裸來到這世界订咸，轉(zhuǎn)眼間也將赤裸裸的回去罷？但不能平的酬诀，為什么偏要白白走這一遭霸嗳隆？</p>
    <p>你聰明的瞒御，告訴我父叙，我們的日子為什么一去不復(fù)返呢？</p>
</body>
</html>

在瀏覽器預(yù)覽效果

分析：這里使用column-gap屬性定義多列布局中“列間距”為20px

列邊框column-rule

在CSS3的多列布局中肴裙，我們可以使用column-rule屬性來定義列與列之間的邊框樣式趾唱，其中邊框樣式包括：寬度、顏色和樣式蜻懦。
- 語法：column-rule：邊框?qū)挾?邊框樣式邊框顏色;
- 說明：column-rule屬性類是一個復(fù)合屬性甜癞，由3個子屬性組成：
  （1）column-rule-width：設(shè)置邊框的寬度；
  （2）column-rule-style：設(shè)置邊框的樣式宛乃；
  （3）column-rule-color：設(shè)置邊框的顏色悠咱；
舉例

<!DOCTYPE html>
<html lang="en">
<head>
    <title>列邊框column-rule屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-count:2;
            -webkit-column-gap:20px;
            -webkit-column-rule:1px dashed red;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
            background-color:#F1F1F1;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了，有再來的時候征炼；楊柳枯了析既，有再青的時候；桃花謝了谆奥，有再開的時 候渡贾。但是，聰明的雄右，你告訴我空骚，我們的日子為什么一去不復(fù)返呢？——是有人偷了他們罷：那是誰擂仍？又藏在何處呢囤屹？是他們自己逃走了罷——如今又到了哪里呢？</p>
    <p>我不知道他們給了我多少日子逢渔，但我的手確乎是漸漸空虛了肋坚。在默默里算著，八千多日子已經(jīng)從我手中溜去肃廓，像針尖上一滴水滴在大海里智厌，我的日子滴在時間的流里，沒有聲音盲赊，也沒有影子铣鹏。我不禁頭涔涔而淚潸潸了。</p>
    <p>……</p>
    <p>在逃去如飛的日子里哀蘑，在千門萬戶的世界里的我能做些什么呢诚卸？只有徘徊罷了，只有匆匆罷了绘迁；在八千多日的匆匆里合溺，除徘徊外，又剩些什么呢缀台？過去的日子如輕煙棠赛，被微風(fēng)吹散了，如薄霧膛腐，被初陽蒸融了睛约；我留著些什么痕跡呢？我何曾留著像游絲樣的痕跡呢依疼？我赤裸裸來到這世界痰腮，轉(zhuǎn)眼間也將赤裸裸的回去罷？但不能平的律罢，為什么偏要白白走這一遭鞍蛑怠？</p>
    <p>你聰明的误辑，告訴我沧踏，我們的日子為什么一去不復(fù)返呢？</p>
</body>
</html>

在瀏覽器預(yù)覽效果

分析：這里使用column-rule屬性定義了列間邊框為“1px的紅色虛線”

跨列column-span

跨列巾钉，類似于我們在HTML中學(xué)過的合并列colspan屬性翘狱，在CSS3多列布局時，有時候我們要實現(xiàn)跨列效果砰苍，就要用到column-span屬性了
語法：column-span：取值;

column-span屬性取值

<!DOCTYPE html>
<html lang="en">
<head>
    <title>跨列column-span屬性</title>
    <style type="text/css">
        body
        {
            width:400px;
            padding:10px;
            border:1px solid silver;
            -webkit-column-count:2;
            -webkit-column-gap:20px;
            -webkit-column-rule:1px dashed red;
        }
        h1
        {
            height:60px;
            line-height:60px;
            text-align:center;
            background-color:silver;
            -webkit-column-span:all;
        }
        p
        {
            font-family:微軟雅黑;
            font-size:14px;
            text-indent:28px;
            background-color:#F1F1F1;
        }
    </style>
</head>
<body>
    <h1>匆匆</h1>
    <p>燕子去了潦匈，有再來的時候阱高；楊柳枯了，有再青的時候茬缩；桃花謝了赤惊，有再開的時 候。但是凰锡，聰明的未舟，你告訴我，我們的日子為什么一去不復(fù)返呢掂为？——是有人偷了他們罷：那是誰裕膀？又藏在何處呢？是他們自己逃走了罷——如今又到了哪里呢勇哗？</p>
    <p>我不知道他們給了我多少日子昼扛，但我的手確乎是漸漸空虛了。在默默里算著智绸，八千多日子已經(jīng)從我手中溜去野揪，像針尖上一滴水滴在大海里，我的日子滴在時間的流里瞧栗，沒有聲音斯稳，也沒有影子。我不禁頭涔涔而淚潸潸了迹恐。</p>
    <p>……</p>
    <p>在逃去如飛的日子里硫痰，在千門萬戶的世界里的我能做些什么呢难捌？只有徘徊罷了社搅，只有匆匆罷了兼犯；在八千多日的匆匆里，除徘徊外锤岸，又剩些什么呢竖幔？過去的日子如輕煙，被微風(fēng)吹散了是偷，如薄霧拳氢，被初陽蒸融了；我留著些什么痕跡呢蛋铆？我何曾留著像游絲樣的痕跡呢馋评？我赤裸裸來到這世界，轉(zhuǎn)眼間也將赤裸裸的回去罷刺啦？但不能平的留特，為什么偏要白白走這一遭啊？</p>
    <p>你聰明的蜕青，告訴我苟蹈，我們的日子為什么一去不復(fù)返呢？</p>
</body>
</html>

在瀏覽器預(yù)覽效果

分析：這里使用“column-span:all;”使得標(biāo)題h1跨越所有的列右核『翰伲跨列是CSS3多列布局中常見的效果，column-span屬性跟表格中的colspan屬性類似

斷行屬性

斷行屬性表

column-break-before

column-break-after

column-break-inside