在CSS中，邊距和溢出不起作用

Question

我是CSS新手。 我正在構建一個包含3列的網頁-左邊一列用於導航，中間一列用於頁面內容，右邊一列用於外部鏈接和注釋。 首先，當我用百分比表示寬度時，溢出正在起作用。 現在，溢出不起作用，右邊界消失了。 這是我的代碼。 請幫幫我。 提前致謝。

//Total pixels: 1366px. (I found this after running a given code on www.w3schools.com).

#rightcontentborder {
    border: 2px solid;
    padding: 5px;
/*  border-radius: 1em;*/

//Left-margin = 1366 - 716 = 650px.
    margin-left: 650px;         
    margin-right:1366px;        

//  width:50px;
    height:700px;
//  overflow:scroll;
    float: right;
    position: absolute;
}

#maincontentborder {
    border: 2px solid;
    padding: 5px;
//  background: #dddddd;

    margin-left: 216px;         
//Given width=500px.
//Right-margin = 1366 - (216+500) = 1366-716 = 650px.
    margin-right: 650px;        

//  width: 100px;
    height: 700px;

    overflow: scroll;
//  float: center;
}

#leftcontentborder {
    border: 2px solid;
    padding: 5px;
//  background: #dddddd;
/*  border-radius: 1em;*/

    margin-left:0px;        /*I have added this line to adjust the left margin of the LEFT content*/
    margin-right:1150px;    /*I have added this line to adjust the right margin of the LEFT content*/
//Width = 1366-1150 = 216px.

    height:700px;

//  float: left;
    position: absolute;
}

Answer 1

如果我准確地滿足了您的要求，則需要3列頁面。 您所寫的CSS不正確。 您必須使用float才能達到此目的。 讓我們看看預期的html

<div class="container">
    <div class="left-content">
        <!-- left sidebar content --> 
    </div>
    <div class="main-content">
        <!-- main content -->
    </div>
    <div class="right-content">
        <!-- right sidebar content -->
    </div>
</div>

假設div的寬度相對於左，主和右分別為300px，600px和300px。

.container {
    overflow: hidden;
    width: 100%;
    max-width: 1200px; 
}

.left-content {
    width: 25%;
    max-width: 300px;
    float: left;
    min-height: 700px;
}

.right-content {
    width: 25%;
    max-width: 300px;
    float: left;
    min-height: 700px;
}
.main-content {
    width: 50%;
    max-width: 600px;
    float: left;
    min-height: 700px;
}

嘗試了解css相對於html的用法。 並根據您的尺寸進行自定義。 祝好運。