페이지 레이아웃을 조정하는 여러 가지 방법-CSS 튜토리얼-php.cn

페이지 레이아웃을 조정하는 여러 가지 방법

一个新手

풀어 주다： 2017-09-18 10:43:51

원래의

8749명이 탐색했습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!