html - 列中的九个 div。这个怎么设计？

Question

我有九个这样的 div:

<div id="content">
    <div class="example">
        <h2>Lorem ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.</p>
    </div>
</div>

怎么排列成如图所示？(css)

Answer 1

你可以通过两种方式做到这一点，第一种......

使用display: inline-block;

Demo

.wrap {
    width: 950px;
}

#content {
    display: inline-block; /* Can also use floats, depends on you */
    width: 300px;
}

第二个使用 column-count 属性(这还没有被广泛支持)

Demo (Demo 可能看起来有点奇怪，需要使用 CSS reset)

.wrap {
    column-count: 3; /* This will cut your content in 3 pieces */
    -moz-column-count: 3;
    -webkit-column-count: 3;
}