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을 사용해야합니다.

<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 픽셀, 600 픽셀 왼쪽, 주 및 오른쪽으로 300 픽셀 상대적 있다고 가정하자 예상되는 HTML을 볼 수 있습니다.

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

HTML과 관련된 CSS의 사용법을 이해하려고합니다. 또한 측정 기준을 맞춤 설정할 수 있습니다. 행운을 빕니다.