html - CSS3、HTML - 如何像这样排列 block

Question

<div class="outer-wrapper">
    <div class="inner-wrapper">
        <div class="item">1</div>
        <!--...-->
        <div class="item">12</div>
    </div>
</div>

.outer-wrapper {
    position: relative;
    min-width: 900px;
    max-width: 900px;
    min-height: 600px;
    max-height: 600px;
}
.inner-wrapper {
    position: relative;
    width: 20000em;
}
.item {
    min-height: 350px;
    max-height: 350px;
    min-width: 350px;
    max-width: 350px;
    background: cornflowerblue;
    font-size: 40px;
    float: left;
}

我已附上图片:

如何以这种方式排列元素而不将组(每六件元素)包装在额外的容器中？可能吗？

Answer 1

结合使用列数和 float :

http://jsfiddle.net/JqRv3/1/

ol {
    -webkit-column-count: 2;
    -moz-column-count:    2;
    column-count:         2;
}
li {
    list-style: decimal inside;
    width: 33.3333%;
    float: left;
}