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/

我试图获得第二个红色＆＃34;主要左边＆＃34;排在第二个蓝色＆＃34;左上角＆＃34;旁边。我想要每个＆＃34;外部＆＃34; div是它自己的表，所以我可以在一个垂直列表中复制我想要的数量，其间有空格。

我在CSS中缺少什么？

Answer 1

现在使用the display:table and related display types for elements.

实际上可以在没有浮点数的情况下执行此操作

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

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

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

Answer 2

您可以将float:left;提供给.main_left课程，这样就可以了。

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

Here is Solution

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

2 个答案: