css - 如何将内容水平放置在webkit列中

Question

如何将内容水平放置在列中，如下所示，

(column1)  (column2)  (column3)
1.asd       2.asd      3.asd
4.asd       5.asd

网站需要此流程

Answer 1

对于css3中的列，你必须有一个div结构......

html:-

<div class="table">
    <div class="column">
        <div class="row">1</div>
        <div class="row">4</div>
        <div class="row">7</div>
    </div>
    <div class="column">
        <div class="row">2</div>
        <div class="row">5</div>
        <div class="row">8</div>
    </div>
    <div class="column">
        <div class="row">3</div>
        <div class="row">6</div>
        <div class="row">9</div>
    </div>
</div>

CSS：-

.table { columns:3; -webkit-columns:3; -moz-columns:3; text-align:center }
.column { }
.row { background-color:red; }

演示：- http://jsfiddle.net/5P9c4/1/