3x3 HTML结构

Question

我想制作一个网格3x3，但问题是一些单元格上的高度会随着内容而扩展。

除了标有红色箭头的高度外，其余的都是固定的px。

我用div制作了一个3x3网格来测试：

<div id="container">
<div id="one">1</div> <div id="two">2</div> <div id="three">3</div>
<div id="four">4</div> <div id="five">5</div> <div id="six">6</div>
<div id="seven">7</div> <div id="eight">8</div> <div id="nine">9</div>
</div>

#container {
    width: 300px;
    margin: 0px auto;
}

#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
    width: 100px;
    float: left;
    padding: 0px; 0px;
    text-align: center;
}

但一旦我换了一个高度，他们就跳错地方了。

有什么想法吗？

​

​

Answer 1

在我看来你想要专栏。

像这样的结构：

<div class="column-thing">
    <div class="left-thing">
        <div>A</div>
        <div>C</div>
    </div>
    <div class="right-thing">
        <div>B<br>B</div>
        <div>D</div>
    </div>
</div>

还有一些绝对的定位：

.column-thing {
    position: relative;
}

.left-thing {
    left: 0;
    position: absolute;
    right: 50%;
}

.right-thing {
    left: 50%;
    position: absolute;
    right: 0;
}

哇哦。

Answer 2

你也可以使用列表(ul/ol，li) (没有javascript)

<ul class="list">
    <li>
        <ul>
            <li><div>1<br/>1</div></li>
            <li><div>2</div></li>
            <li><div>3</div></li>
        </ul>
    </li>
    ...
</ul>

http://jsfiddle.net/xKjNG/

Answer 3

如果要确保每一行中有三个div，则需要确保每组三个div实际上包含一个div.