세 개의 난간 배치의 세 가지 방법(좌우 두 개의 난간 고정 너비)

1. 절대 포지셔닝

<body>
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
</body>

html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#a0b3d6;}
#right{right:0; background:#a0b3d6;}
#main{margin:0 210px; background:#ffe6b8; height:100%;}

참고: 중간 열에 최소 너비 제한이 있거나 너비가 있는 내부 요소가 있는 경우 브라우저의 너비가 어느 정도 작으면 레이어가 중첩될 수 있습니다.그러나 일반적인 상황에서 사용자 모니터의 해상도 폭이 >=1600 픽셀이 아니면 사용자는 브라우저를 1000 픽셀 이하로 축소하지 않습니다
2. 부동 배합 음변 거리

<style>
     html,body{margin:0; height:100%;}
#main{width:100%; height:100%; float:left;}
#main #body{margin:0 210px; background:#ffe6b8; height:100%;}
#left,#right{width:200px; height:100%; float:left; background:#a0b3d6;}
#left{margin-left:-100%;}
#right{margin-left:-200px;}
</style>
<body>
    <div id="main">
	   <div id="body"></div>
    </div>
    <div id="left"></div>
    <div id="right"></div>
</body>

주의: 중간 부분은 반드시 첫 번째에 있어야 합니다.좌우 양쪽의 고정 난간 위치가 자유롭다
3. 자체 부동

<style>
    html,body{margin:0; height:100%;}
#main{height:100%; margin:0 210px; background:#ffe6b8;}
#left,#right{width:200px; height:100%; background:#a0b3d6;}
#left{float:left;}
#right{float:right;}
</style>

<div id="left"></div>
<div id="right"></div>
<div id="main"></div>

참고: 바디는 반드시 마지막에 있어야 합니다.

다음 에피소드: 무심결에 본 팁--
물음: 용기의 폭이 모니터의 최대 해상도보다 클 때 용기를 어떻게 가운데에 놓습니까?예: 컨테이너 너비: 1920, 화면 해상도: 1440.
A:용기 {position:absolut;left:50%,margin-left:-960px}

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

[JS] Object, Array 자주 사용하는 순환 Method 정리

key, value 두 값에 접근할 땐 Object.entries() key에만 접근할 때는 Object.keys() : 객체의 key 로 이루어진 배열이 반환된다. for...of와 함께 쓰면 순환하면서 접근할 수...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

세 개의 난간 배치의 세 가지 방법(좌우 두 개의 난간 고정 너비)

좋은 웹페이지 즐겨찾기