페이지 레이아웃을 조정하는 여러 가지 방법
- 一个新手원래의
- 2017-09-18 10:43:518675검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：CSS 세로 눈금자를 만드는 방법다음 기사：CSS 세로 눈금자를 만드는 방법