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中首先列出中间div（主要内容），我不想重新排列内容中的元素顺序。 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 {
}

技巧涉及将左/右填充添加到包含块然后使用负边缘让花车坐在填充区域。

这个技巧有时被称为“圣杯”＃34;并且更详细地解释在：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 {
}

Div内多个Div容器内的多个Div

2 个答案: