1

私はテーブル レイアウトを持っています - 3 つのセル。左右は100px、真ん中はオートサイズです。

2 つの 50% の「セル」に分割された「行」を作成し、各「セル」に既存の 3 つのセル行の 1 つを配置したいと思います。

悪いタイトルですが、説明するのは難しいですが、これまでのところ、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 に答える