[CSS3] 多列布局 column

類似報紙雜誌一樣的佈局設計

[1] columns

columns: column-width column-count

.wrapper{
    width:800px;
    margin:0 auto;
    /*10em 每列寬度*/
    /*3 列數*/
    columns:10em 3;
    -moz-columns:10em 3;
    -webkit-columns:10em 3;
}
p:first-letter{
    font-weight: bold;
}

<div class="wrapper">
<h1>You Have Only One Life</h1>
<p>There are .....</p>
<p>May you .....</p>
<p>The happiest of people .....</p>
<p>who have touched their lives......</p>
<p>When you were born,.....</p>
</div>

---

[2] column-gap

.wrapper{
    width:800px;
    margin:0 auto;
    /*10em 每列寬度*/
    /*3 列數*/
    columns:10em 3;
    -moz-columns:10em 3;
    -webkit-columns:10em 3;
    /*列間隔*/
    column-gap:5em;
    -moz-column-gap:5em;
    -webkit-column-gap:5em;
    /*列間隔*/
}
p:first-letter{
    font-weight: bold;
}

---

[2] column-rule

    /*列邊框樣式*/
    column-rule:3px solid orange;
    -moz-column-rule:3px solid orange;
    -webkit-column-rule:3px solid orange;
    /*列邊框樣式*/

---

[2] column-span

h1{
    text-align: center;
    /*跨列布局*/
    column-span:all;
    -moz-column-span:all;
    -webkit-column-span:all;
    /*跨列布局*/
}