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 { 
}