Several ways to adjust page layout-CSS Tutorial-php.cn

Several ways to adjust page layout

一个新手

Release： 2017-09-18 10:43:51

Original

8722 people have browsed it

1. Use floating layout
Advantages: better compatibility.
Disadvantages: After floating, the elements are out of the document flow. You need to carefully handle the clearing of floats and the relationship between floating elements and surrounding elements.

<!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>

Copy after login

Note: The most important thing to pay attention to is that the middle The columns must be placed behind the left and right columns! ! !

2. Use absolute positioning layout
Advantages: The layout is relatively fast
Disadvantages: The positioned element is out of the document flow, which means that its child elements are also out of the document flow, so this The usability of the method is relatively poor

<!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>

Copy after login

3. Using flex layout

Advantages: It solves the shortcomings of floating and absolute positioning well. Now mobile terminals basically use flex layout
Ie8 and below do not support 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>

Copy after login

Note: The middle column must be placed in the middle! ! !

4. Use table layout
Advantages: Good compatibility
Disadvantages: The content height of one column increases, and the height of the other two columns also increases. Sometimes we don’t need them Increase the height at the same time; it is not conducive to search engines to crawl information;

<!-- 表格布局解决方案 -->
	<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>

Copy after login

5. Grid layout

<!-- 网格布局解决方案 -->
	<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>

Copy after login

If the known height is removed or the height exceeds
1. The flex layout height can be adaptive
2. Table layout Audu can adapt to the height
3. Floating, absolute positioning, grid layout cannot adapt to height

The above is the detailed content of Several ways to adjust page layout. For more information, please follow other related articles on the PHP Chinese website!