html - Container of Multiple Div inside a 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>

注意:出于 SEO 的目的，我真的希望在 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 {
}

技巧涉及向包含 block 添加左/右填充，然后使用 负边距使浮标位于填充区域。

这个技巧有时被称为“ chalice ”，并有更详细的解释 在:http://alistapart.com/article/holygrail

参见 fiddle :http://jsfiddle.net/audetwebdesign/wrudgcaL/