0

我正在尝试设置顶部、左侧、中心、右侧、底部的边框布局。我已经看过一些示例并尝试了它们，但它们似乎都不起作用。主要问题在于左、中和右列。我只能让两个 div 水平对齐，第三个总是低于页脚。我需要这个可以调整大小。优选地，中心窗格将填满直到边界。

我试过向左浮动和向右浮动，但没有任何区别。

这是我到目前为止所尝试的。 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>
4

1 回答 1

1

您可以float:left在前两个中间列上使用float:right，在第三列上使用 a。我会overflow:hidden在中间列的包装上放一个。

http://jsfiddle.net/zer6N/1/

.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;
}
于 2013-04-07T20:37:47.083 回答