구현 방법:
1.Float float
<section class='layout float'> <style> .layout.float .left-right-center{ height: 100px; } .layout.float .left{ float: left; width: 300px; background-color: red; } .layout.float .right{ float: right; width: 300px; background-color: blue; } .layout.float .center{ background-color: yellow; } </style> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center">我是中间的自适应元素--浮动</div> </article> </section>
원리: 왼쪽과 오른쪽 div가 문서 흐름에서 벗어나 있으므로 가운데가 위로 이동하여 3열 레이아웃 효과가 발생합니다(제공됨). 높이가 같다는 것)
장점 : 호환성이 높다
단점 : 다른 요소에 영향을 주지 않도록 플로트를 지워야 함
높이가 고정되지 않으면 가운데에 있는 내용이 늘어나서 왼쪽과 오른쪽이 늘어나게 됩니다. 측면은 함께 늘어나지 않습니다
(추천 튜토리얼: CSS 튜토리얼)
2. 절대 위치 지정
<section class="layout absolute"> <style> .layout.absolute .left-center-right div{ position: absolute; height: 100px; } .layout.absolute .left{ left: 0; width: 300px; background-color: red; } .layout.absolute .center{ left: 300px; right: 300px; background-color: yellow; } .layout.absolute .right{ right: 0; width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--绝对定位 </div> <div class="right"></div> </article> </section>
원리: 절대 위치 지정과 너비를 사용하여 왼쪽과 오른쪽의 div와 가운데 너비를 고정합니다. div는 적응 효과를 갖습니다
장점: 빠르다
단점: 상위 요소가 문서 흐름에서 분리되면 하위 요소가 문서 흐름에서 확실히 벗어나고 응용 시나리오가 많지 않습니다
높이가 가운데 요소의 높이가 증가하면 양쪽 요소의 높이가 증가하지 않으므로 가운데 div만 늘어납니다
3. Flex 레이아웃
<section class="layout flex"> <style> .layout.flex .left-center-right{ display: flex; height: 100px; } .layout.flex .left{ width: 300px; background-color: red; } .layout.flex .center{ flex: 1; background-color: yellow; } .layout.flex .right{ width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--flex布局 </div> <div class="right"></div> </article> </section>
원리: 상위 요소를 flex 레이아웃으로 설정한 다음 flex를 다음으로 설정합니다. 1 중간 요소는 적응 효과를 얻습니다
장점: 실제 개발에서 흔히 사용됩니다
단점: IE8 이하 브라우저에서는 지원하지 않습니다
높이가 고정되지 않으면 중간 콘텐츠의 높이가 확장된 후, 그에 따라 양면도 확장됩니다
4. 테이블 레이아웃
<section class="layout table"> <style> .layout.table .left-center-right{ display: table; height: 100px; width: 100%; } .layout.table .left{ display: table-cell; width: 300px; background-color: red; } .layout.table .center{ display: table-cell; background-color: yellow; } .layout.table .right{ display: table-cell; width: 300px; background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--table </div> <div class="right"></div> </article> </section>
원리: 상위 요소를 테이블 레이아웃으로 설정한 다음 각 하위 요소는 테블 셀이고 왼쪽 및 오른쪽 그리드를 고정 너비로 설정합니다. 중간 그리드는 적응 효과를 얻을 수 있습니다
장점: 호환성이 좋으며 IE8 이하의 플렉스 레이아웃을 대체하여 사용할 수 있습니다
단점: 제한 사항
높이가 고정되지 않으면 가운데가 늘어날 때 왼쪽과 오른쪽이 flex
5와 비슷하게 측면도 늘어납니다. 그리드 레이아웃
<section class="layout grid"> <style> .layout.grid .left-center-right{ display: grid; width: 100%; grid-template-rows: 100px;/*每一格都是100px高*/ grid-template-columns: 300px auto 300px;/*左右两格都是300px,中间是自适应*/ } .layout.grid .left{ background-color: red; } .layout.grid .center{ background-color: yellow; } .layout.grid .right{ background-color: blue; } </style> <article class="left-center-right"> <div class="left"></div> <div class="center"> 我是中间的自适应元素--grid布局 </div> <div class="right"></div> </article> </section>
원리: 상위 요소를 그리드 레이아웃으로 설정한 다음 각 그리드의 높이와 너비를 지정하고 각 그리드에 별도로 지정하세요. 색상만 별도로 설정하세요
장점: 기술이 비교적 새롭고 편리합니다.
단점: 호환성이 그다지 좋지 않습니다.
높이가 고정되어 있지 않으면 중간 요소에 텍스트를 추가해도 늘어나지 않습니다.
추천 관련 비디오 튜토리얼: css 비디오 튜토리얼
위 내용은 CSS에서 3열 레이아웃을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!