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/

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

1 个答案: