1

我有一个表格布局 - 3 个单元格。左右各占 100px，中间是自动调整大小。

我想创建一个“行”，它被分成 2 个 50% 的“单元格”，并将现有的 3 个单元格行之一放在每个“单元格”中。

标题不好，但很难描述，但这是我到目前为止的 div 布局，下面是我试图为表格布局重现的内容：

<!DOCTYPE html>
<html>
<head>
<title></title>

    <style>

     .container { width: 800px; margin: 0 auto; }
     p {
        display:table;
        width: 100%;
        margin: 10px 0;
     }
     .left {
        display:table-cell;
        width: 100px;
        background-color: black;
     }
     .mid {
        display:table-cell;
        width: auto;
        background-color: red;
     }
     .right {
        display:table-cell;
        width: 100px;
        background-color: green;
     }


     table { width: 100% }

    </style>
 </head>

 <body>

        <div class="container">

            <h1>DIV</h1>

            <!-- one half -->

            <p>
                <span class="left">aaa</span>
                <span class="mid">aaa</span>
                <span class="right">aaa</span>
            </p>
            <!-- /one half -->
            <!-- one half -->
            <p>
                <span class="left">bbb</span>
                <span class="mid">bbb</span>
                <span class="right">bbb</span>
            </p>
            <!-- /one half -->
            <p>
                <span class="left">ccc</span>
                <span class="mid">ccc</span>
                <span class="right">ccc</span>
            </p>



        <h1>TABLE</h1>

        <table>
            <tr>
                <td width="50%">
                    <table>
                        <tr>
                            <td class="left">aaa</td>
                            <td class="mid">aaa</td>
                            <td class="right">aaa</td>
                        </tr>
                    </table>
                </td>
                <td width="50%">
                    <table  width="100%">
                        <tr>
                            <td class="left">aaa</td>
                            <td class="mid">aaa</td>
                            <td class="right">aaa</td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <table>
                        <tr>
                            <td class="left">ccc</td>
                            <td class="mid">ccc</td>
                            <td class="right">ccc</td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>
    </div>
</body>
</html>

http://jsfiddle.net/RmaKW/2/

我以为我可以将前 2 个“行”包装在一个简单的 float: left, width: 50% div 中，但没有任何运气。

4

1 回答 1

0

你的意思是这样的吗？

http://jsfiddle.net/coma/YvTXT/1/

HTML

<div class="doo">
    <div class="foo">
        <div></div>
        <div></div>
        <div></div>
    </div>
    <div class="foo">
        <div></div>
        <div></div>
        <div></div>
    </div>
</div>

CSS

div.doo > div {
    float: left;
    width: 50%;
}

div.doo:after {
    content: "";
    display: block;
    clear: both;
}

div.foo {
    position: relative;
    min-height: 300px;
    background-color: #eee;
}

div.foo > div:first-child, div.foo > div:last-child {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100px;
    background-color: #333;
}

div.foo > div:first-child {
    left: 0;
}

div.foo > div:last-child {
    right: 0;
}

div.foo > div:nth-child(2) {
    padding: 0 100px;
}
于 2013-05-10T20:29:33.930 回答