CSSでは余白とオーバーフローが効きません

Question

私はCSSが初めてです。 3つの列を持つWebページを構築しています。左側はナビゲーション用、もう1つはページコンテンツ用、もう1つは外部リンク用とメモ用です。まず、幅をパーセンテージで調べたところ、オーバーフローが発生していました。今すぐ右のボーダーが消えてしまったように、オーバーフローもうまくいかない。ここに私のコードです。私を助けてください。前もって感謝します。

//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要素の幅は、左主および右に300ピクセル、300ピクセル600PXと相対的であると仮定することができます見ることができます。

.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; 
} 

hssに関連するCSSの使用方法を理解してください。そして、あなたの次元でカスタマイズしてください。がんばろう。