html - 如何像表格一样定位嵌套的 div

Question

我正在尝试使用 div 和 CSS 创建一种表格。我让它看起来正确，但如果我复制下面的表格，它就不再正确排列了。

HTML:

<div class="outer">
    <div class="main_right">
        <div class="top">
            <div class="top_right">top right</div>
            <div class="top_left">top left</div>
        </div>
        <div class="bottom">
            <div class="right">right1</div>
            <div class="left">
                <table>
                    <tr>
                        <td>left 1</td>
                        <td>left 2</td>
                    </tr>
                    <tr>
                        <td>left 1</td>
                        <td>left 2</td>
                    </tr>
                </table>
            </div>
            <div class="right">right2</div>
            <div class="left">
                <table>
                    <tr>
                        <td>left 1</td>
                        <td>left 2</td>
                    </tr>
                    <tr>
                        <td>left 1</td>
                        <td>left 2</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
    <div class="main_left">main left</div>
</div>
<br>

CSS:

.outer {
    width: 800px;
}
.main_left {
    width:200px;
    background:red;
}
.main_right {
    float:right;
    width:600px;
}
.top_left {
    background:blue;
    width: 400px;
}
.top_right {
    background:purple;
    float: right;
    width:200px;
}
.left {
    background:yellow;
    width: 350px;
}
.right {
    background:green;
    float: right;
    width: 250px;
}

http://jsfiddle.net/mK9TQ/

我正在尝试让第二个红色“main left”与第二个蓝色“top left”对齐。我希望每个“外部”div 都是它自己的表，这样我就可以在垂直列表中复制任意多个，中间有空格。

我在 CSS 中缺少什么？

Answer 1

您现在可以使用 the display:table and related display types for elements. 在没有 float 的情况下实际执行此操作

唯一的区别是您需要更改数据以匹配表格的行 > 列设置，而不是您目前拥有的列 > 行设置。

如果你只是想让三列正确定位，你可以使用类似下面的东西将每个内部 div 设置为一个列，在外部 div 中。

div.outer { display:table-row}
div.outer > div { display:table-cell}