Plusieurs façons d'ajuster la mise en page-tutoriel CSS-php.cn

Plusieurs façons d'ajuster la mise en page

一个新手

Libérer： 2017-09-18 10:43:51

original

8772 Les gens l'ont consulté

1. Utiliser une mise en page flottante
Avantages : meilleure compatibilité.
Inconvénients : après le flottement, les éléments sont hors du flux de documents. Vous devez gérer soigneusement la suppression des flottants et la relation entre les éléments flottants et les éléments environnants.

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

Copier après la connexion

Remarque : le plus important. Ce à quoi il faut faire attention, c'est que la colonne du milieu doit être placée derrière les colonnes de gauche et de droite ! ! !

2. Utiliser la mise en page à positionnement absolu
Avantages : La mise en page est relativement rapide
Inconvénients : L'élément positionné est hors du flux du document, ce qui signifie que ses éléments enfants sont également hors du flux. le flux de documents, donc ceci La convivialité de la méthode est relativement médiocre

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

Copier après la connexion

3. Utilisation de la mise en page flexible

Avantages : Elle résout très bien les défauts du positionnement flottant et absolu Maintenant mobile. les terminaux utilisent essentiellement la disposition flex
Ie8 et inférieurs ne prennent pas en charge 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>

Copier après la connexion

Remarque : la colonne du milieu doit être placée au milieu ! ! !

4. Utiliser la disposition des tableaux
Avantages : La compatibilité n'est pas mauvaise
Inconvénients : La hauteur du contenu d'une colonne augmente, et la hauteur des deux autres colonnes augmente également. vous n'en avez pas besoin Augmentez la hauteur en même temps ; cela ne favorise pas l'exploration des informations par les moteurs de recherche

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

Copier après la connexion

5. Disposition de la grille

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

Copier après la connexion

Si la hauteur connue est ; supprimé ou la hauteur dépasse
1.disposition flexible La hauteur peut être adaptative
2. La disposition de la table Odu peut être adaptative
3. Le positionnement flottant, absolu et la disposition en grille ne peuvent pas s'adapter à la hauteur

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!