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

您还可以使用列表 (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 2

在我看来，您想要列。

像这样的结构：

<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 3

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

Answer 4

试试这个：

<style>
#one, #two, #three, #four, #five, #six, #seven, #eight, #nine {
    width: 100px;
    float: left;
    padding: 0px; 0px;
    text-align: center;
    outline: 1px solid black;
}

.clear_float {
    clear: both;
}
</style>

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

Answer 5

我认为内容不应该基于表格，这就是您不想使用表格的原因。但一个想法是使用假表：

<div class="table">
  <div class="tr">
    <div class="td">
    </div>
    <div class="td">
    </div>
  </div>
</div>

然后在 .table 添加 CSS display:table并在 .td 添加 CSS display:table-cell。

命名约定有助于使用代码，因为您将习惯使用表的标签结构。

我做了一个简单的例子（需要比我想象的更多的工作）：http: //jsfiddle.net/cyv6y/1/

需要整理一下，但这个概念有效。