1. 플로팅 레이아웃 사용
장점: 호환성이 더 좋습니다.
단점: 플로팅 후 요소가 문서 흐름에서 벗어납니다. 플로트 삭제 및 플로팅 요소와 주변 요소 간의 관계를 주의 깊게 처리해야 합니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> * { margin: 0; padding: 0; } .layout{ margin: 20px; } .layout article p{ min-height: 100px; } </style> </head> <body> <!-- 浮动解决方案 --> <section class="layout float"> <style> .layout.float .left{ float: left; width: 300px; background: red; } .layout.float .right{ float: right; width: 300px; background: blue; } .layout.float .center{ background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="right"></p> <p class="center"> <h1>浮动解决方案</h1> 1.这是三栏布局中间部分 1.这是三栏布局中间部分 </p> </article> </section> </body> </html>
참고: 가장 중요한 점은 중간 열이 반드시 있어야 한다는 것입니다. 왼쪽과 오른쪽에 배치됩니다. 뒤에 두 개의 열이 있습니다! ! !
2. 절대 위치 지정 레이아웃 사용
장점: 레이아웃이 상대적으로 빠릅니다.
단점: 위치 지정 요소가 문서 흐름을 벗어났습니다. 이는 해당 하위 요소도 문서 흐름을 벗어났음을 의미하므로 이 방법의 유용성은
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面布局</title> <style> * { margin: 0; padding: 0; } .layout{ margin: 20px; } .layout article p{ min-height: 100px; } </style> </head> <body> <!-- 绝对定位解决方案 --> <section class="layout absolute"> <style> .layout.absolute .left-right-center{ position: relative; } .layout.absolute .left{ position: absolute; left: 0; width: 300px; background: red; } .layout.absolute .right{ position: absolute; right: 0; width: 300px; background: blue; } .layout.absolute .center{ position: absolute; left: 300px; right: 300px; background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="center"> <h2>绝对定位解决方案</h2> 1.这是三栏布局绝对定位解决方案 1.这是三栏布局绝对定位解决方案 </p> <p class="right"></p> </article> </section> </body> </html>
3. flex 레이아웃 사용
장점: 플로팅 및 절대 위치 지정의 단점을 매우 잘 해결했습니다. 이제 모바일 단말기는 기본적으로 flex 레이아웃을 사용합니다.
IE8 이하는 flex를 지원하지 않습니다
<section class="layout flex"> <style> .layout.flex .left-right-center{ display: flex; margin-top: 140px; } .layout.flex .left{ flex: 0 0 300px; width: 300px; background: red; } .layout.flex .right{ flex: 0 0 300px; width: 300px; background: blue; } .layout.flex .center{ flex: 1; background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="center"> <h2>Flexbox解决方案</h2> 1.这是三栏布局flexbox解决方案 1.这是三栏布局flexbox解决方 </p> <p class="right"></p> </article> </section>
참고: 중간 열 중앙에 배치해야 합니다! ! !
4. 테이블 레이아웃 사용
장점: 호환성이 나쁘지 않습니다.
단점: 한 열의 콘텐츠 높이가 증가하면 다른 두 열의 높이도 동시에 증가할 필요가 없습니다. 시간; 검색 엔진이 정보를 크롤링하는 데 도움이 되지 않습니다;
<!-- 表格布局解决方案 --> <section class="layout table"> <style> .layout.table .left-right-center{ width: 100%; display: table; height: 100px; } .layout.table .left{ display: table-cell; width: 300px; background: red; } .layout.table .right{ display: table-cell; width: 300px; background: blue; } .layout.table .center{ display: table-cell; background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="center"> <h2>表格布局解决方案</h2> 1.这是三栏布局表格布局解决方案 1.这是三栏布局表格布局解决方案 </p> <p class="right"></p> </article> </section>
5. 그리드 레이아웃
<!-- 网格布局解决方案 --> <section class="layout grid"> <style> .layout.grid .left-right-center{ width: 100%; display: grid; grid-template-rows: 100px; grid-template-columns: 300px auto 300px; } .layout.grid .left{ background: red; } .layout.grid .right{ background: blue; } .layout.grid .center{ background: yellow; } </style> <article class="left-right-center"> <p class="left"></p> <p class="center"> <h2>网格布局解决方案</h2> 1.这是三栏布局网格布局解决方案 1.这是三栏布局网格布局解决方案 </p> <p class="right"></p> </article> </section>
알려진 높이가 제거되거나 높이가 초과하는 경우
1. 플렉스 레이아웃의 높이가 조정될 수 있습니다
2. 테이블 레이아웃 적응 가능
3. 부동, 절대 위치 지정, 그리드 레이아웃이 높이에 적응할 수 없습니다
위 내용은 페이지 레이아웃을 조정하는 여러 가지 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!