javascript - 3 x 3 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;
}

Voilà.