如何像表格一样定位嵌套的div答案

【问题标题】：How to position nested divs like a table如何像表格一样定位嵌套的div
【发布时间】：2014-07-04 20:17:02
【问题描述】：

我正在尝试使用 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/

我试图让第二个红色“主左”与第二个蓝色“左上角”对齐。我希望每个“外部” div 都有自己的表格，这样我就可以在垂直列表中复制任意数量的内容，中间有空格。

我在 CSS 中遗漏了什么？

【问题讨论】：

标签： html css layout

【解决方案1】：

您现在可以使用 the display:table and related display types for elements. 来真正做到这一点而无需浮点数

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

如果您只想正确定位三列，您可以使用类似下面的方法将每个内部 div 设置为外部 div 内的列。

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

【讨论】：

【解决方案2】：

您可以将float:left; 分配给.main_left 类，这样就可以了。

.main_left {
    width:200px;
    background:red;
    float:left;
}

Here is Solution

【讨论】：