javascript - 3 x 3 HTML结构

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

除了标有红色箭头的高度，其余均为固定像素。

我制作了一个3x3的div网格进行测试：

<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;
}

但是，只要我改变一个高度，它们就会跳出位置。

任何想法？

最佳答案

在我看来，您想要的列。

这样的结构：

<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;
}

Voilà.