CSS三列布局

Question

我正在嘗試設置頂部，左側，中心，右側，底部的邊框布局。 我已經看到了一些示例並進行了嘗試，但是似乎都沒有用。 主要問題在於左，中和右列。 我只能將兩個div水平對齊，第三個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>

Answer 1

您可以在前兩列中間使用float:left ，在第三列上使用float:right 。 我會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;
}

CSS三列布局

問題描述

1 個解決方案

解決方案1
1 已采納 2013-04-07 20:37:47

CSS三列布局

問題描述

1 個解決方案

解決方案1 1 已采納 2013-04-07 20:37:47

解決方案1
1 已采納 2013-04-07 20:37:47