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

您有两个内容块在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 回答