我正在尝试设置具有上、左、中、右、下的边框布局。我看过几个例子并尝试过它们，但它们似乎都不起作用。主要问题出在左列、中列和右列。我只能让两个 div 水平对齐，第三个总是位于页脚下方。我需要这个可以调整大小。最好是中心 Pane 将填满直到边框。
我试过向左浮动和向右浮动，但没有任何区别。
到目前为止，这是我尝试过的。 http://jsfiddle.net/xQVWs/2/
<body>
<div class="top-wrapper">
<div class="content-wrapper">
<header>
header
</header>
</div>
</div>
<div class="mid-section">
<div class="left-wrapper">
Left Pane
</div>
<div class="main-content">
Main pane
</div>
<div class="right-wrapper">
right pane
</div>
</div>
<div class="bottom-wrapper">
<div class="content-wrapper">
footer
</div>
</div>
</body>
最佳答案
您可以在前两列中间使用 float:left，在第三列使用 float:right。我会在中间列的包装器上放置一个 overflow:hidden。
.mid-section
{
background-color: blue;
width: 100%;
height:1000px;
overflow:hidden;
}
.left-wrapper, .right-wrapper {
background: #ffff00;
height: 100%;
min-height: 100%;
width: 21%;
display:block;
float:left;
margin:0;
}
.right-wrapper {
background:#efefef;
float:right;
}
.main-content {
background-color: black;
width: 58%;
height: 100%;
margin:0;
float:left;
}
关于css 三列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15867053/