Question

我有一个表格布局 - 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/

我以为我可以将前两个“行”包裹在一个简单的浮点数中：左，宽度：50％div但是没有运气。

Answer 1

你的意思是这样吗？

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;
}

如何使用CSS div布局使用colspan = 2布局模仿表

1 个答案: