2

次のレイアウトを作成しようとしています。

+-----------------------------------+
|                                   |
+-----------------------------------+
+-----------------------------------+
| +-------------------------------+ |
| |                               | |
| +-------------------------------+ |
| +-----+  +-------------+ +------+ |
| |     |  | +---------+ | |      | |
| |     |  | |         | | |      | |
| |     |  | |         | | |      | |
| |     |  | +---------+ | |      | |
| |     |  | +---+ +---+ | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |
| |     |  | |   | |   | | |      | |   
| |     |  | +---+ +---+ | |      | |
| +-----+  +-------------+ +------+ |
+-----------------------------------+

しかし、何らかの理由で、divは完全な幅または高さに拡張されません：http：//jsfiddle.net/vmpgf/

助言がありますか？

ありがとう

4

1 に答える 1

0

右側の div にいくつか問題があります。何らかの理由で、3 つの div 幅の合計が 99% になる場合にのみ適合するため、これは「答えではない」と確信しています。 」 しかし、あなたを近づけます。

HTML -

<div id="divbanner">Top Banner</div>
<div id="container">
    <div id="banner">
        Banner
    </div>
    <div id="left">
        Left
    </div>
    <div id="center">
        <div id="centertop">
            Center Top
        </div>
        <div id="centerleft">
            Center Left
        </div>
        <div id="centerright">
            Center Right
        </div>
    </div>
    <div id="right">
        Right
    </div>
</div>

CSS -

#divbanner {
    width: 100%;
    background: #F45;
}
#container {
    width: 100%;
    background: #00C;
}
#banner {
    width: 100%;
    background: #778;
}
#left {
    width: 30%;
    background: #cc5;
    display: inline-block;
}
#center {
    width: 39%;
    background: #cc7;
    display: inline-block;
}
#right {
    width: 30%;
    background: #cc7;
    display: inline-block;
}
#centertop {
    width: 100%;
    background: #445;
}
#centerleft {
    width: 50%;
    background: #c62;
    float: left;
}
#centerright {
    width: 50%;
    background: #062;
    float: right;
}​

ここで試してみてください: http://jsfiddle.net/tyDq5/

于 2012-06-13T18:58:23.070 に答える