Div Div中的多個Div容器中的多個Div

Question

好吧，我在一個容器中有多個Div，3是準確的，外面的兩個有調整它們所在容器高度的可變信息。div中間有多個div，裏面也有變量信息，我也想調整整個容器的高度，也有可變寬度，所以如果有人擴大他們的窗口，內容會隨之擴大。當內容被放置在它中間時，我似乎無法保持中間div在中間，它需要它移動到下一行，它將2個外部div放下。我需要所有三個Div能夠調整容器的高度，以保持背景顏色最長的div的底部。 Here是我正在努力完成的基本代碼。

<div class="container"> 
    <div class="main"> 
     <div class="content"> 
      Content 
     </div> 
     <div class="morecontent"> 
      More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content 
     </div> 
    </div> 
    <div class="left"> 
     Left 
    </div> 
    <div class="right"> 
     Right 
    </div> 
</div> 

注：對於搜索引擎優化的目的，我真的很想有在HTML列出的第一個中間格（主要內容），我不想重新排列 HTML中的元素的順序。

Answer 1

如果你想保持HTML如圖所示，你可以嘗試以下方法：

<div class="container"> 
    <div class="main"> 
     <div class="content">Content</div> 
     <div class="morecontent">More Content...</div> 
    </div> 
    <div class="left">Left...</div> 
    <div class="right">Right...</div> 
</div> 

對於CSS：

.container { 
    background-color:#09F; 
    padding: 0 60px 0 60px; 
    overflow: auto; 
} 
.main { 
    border: 1px solid blue; 
    float: left; 
    position: relative; 
    width: 100%; 
} 
.left { 
    width:50px; 
    float:left; 
    border:dotted; 
    position: relative; 
    margin-left: -100%; 
    right: 60px; 
    overflow: auto; 
} 
.right { 
    width:50px; 
    float:left; 
    border:solid; 
    position: relative; 
    margin-right: -60px; 
    overflow: auto; 
} 
.content { 
} 
.morecontent { 
} 

的技巧是將左/右填充到然後使用 負邊距使浮標坐在填充區域。

這招有時被稱爲「聖盃」，並在更詳細 說明：http://alistapart.com/article/holygrail

參見小提琴在：http://jsfiddle.net/audetwebdesign/wrudgcaL/

Answer 2

這是一個選項：http://jsfiddle.net/ctwheels/2fLe5f65/17/

HTML與您上面張貼的代碼相同

<div class="container"> 
    <div class="main"> 
     <div class="content"> 
      Content 
     </div> 
     <div class="morecontent"> 
      More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content More Content 
     </div> 
    </div> 
    <div class="left"> 
     Left 
    </div> 
    <div class="right"> 
     Right 
    </div> 
</div> 

CSS

.container { 
    background-color:#09F; 
    overflow:hidden; 
    position:relative; 
} 
.main { 
    border:solid; 
    margin-left:53px;/*width of left div + its border width*/ 
    margin-right:53px;/*width of right div + its border width*/ 
} 
.left { 
    width:50px; 
    position:absolute; 
    left:0px; 
    top:0px; 
    border:solid; 
} 
.right { 
    width:50px; 
    position:absolute; 
    right:0px; 
    top:0px; 
    border:solid; 
} 
.content { 
} 
.morecontent { 
}