2

左側にメニュー、右側にサイト コンテンツがある 2 列のリキッド レイアウトを作成しようとしています。

メニューは右の列 ( div.liquid-right) に入り、サイトのコンテンツは左の列 ( div.liquid-left) に入ります。

div.liquid-rightコンテンツ コンテナーは、左のコンテナー ( ) である親ではなく、本体 (つまり ) と同じサイズである必要がありdiv.liquid-leftます。

レイアウトは次の図で表すことができます。

_______________
|  ____     R |
| |L __|_____ |
| | |C |     ||
| | |  |     ||
| | |  |     ||    
|_|_|__|_____||

HTML マークアップ

 <div class="liquid">
     <div class="liquid-right">
         <div class="liquid-left">
             <div class="content">
                 <div>main content</div>
             </div>
         </div>
     </div>
 </div>

CSS スタイル

.liquid{
    width:100%; height:100%;  float:left;
}

.liquid .liquid-right{
    width:100%; float:left; background-color:#FFF; margin-top:45px;
}

.liquid .liquid-left{
    width:182px; float:left; min-height:200px; 
    background-color:#FF7575;  position:relative;
}   

.liquid .content{
    background-color:#00F; float:left;  height:100px; width:100%;
}

現在、.contentコンテナは左側のコンテナのサイズのみです（これは予想されます）が、本体コンテナのサイズに拡張する方法がわかりません。

アップデート

http://jsfiddle.net/Ex4tK/

4

1 に答える 1

0

の中に 2 つのコンテンツ ブロックがありleftます。leftそれらを拡張して静的に保ちたい場合は、それらの子を移動します。

<div class="liquid-right">
   <div class="liquid-left">Left</div>
   <div class="liquid-content">Liquid Content
      <div>
         main content
      </div>
   </div>
</div>

http://jsfiddle.net/MhCke/

于 2013-04-06T12:09:40.863 に答える