Mehrere Möglichkeiten zum Anpassen des Seitenlayouts-CSS-Tutorial-php.cn

Mehrere Möglichkeiten zum Anpassen des Seitenlayouts

一个新手

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

Original

8749 Leute haben es durchsucht

1. Floating-Layout verwenden
Vorteile: bessere Kompatibilität.
Nachteile: Nach dem Floating befinden sich die Elemente außerhalb des Dokumentflusses. Sie müssen sorgfältig mit dem Löschen von Floats und der Beziehung zwischen Floating-Elementen und umgebenden Elementen umgehen Zu beachten ist, dass die mittlere Spalte hinter der linken und rechten Spalte platziert werden muss! ! !

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

Nach dem Login kopieren

2. Verwenden Sie das absolute Positionierungslayout
Vorteile: Das Layout ist relativ schnell

Nachteile: Das positionierte Element befindet sich außerhalb des Dokumentflusses, was bedeutet, dass seine untergeordneten Elemente ebenfalls außerhalb sind Der Dokumentenfluss ist daher relativ schlecht.

3. Verwendung von Flex-Layout

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

Nach dem Login kopieren

Vorteile: Es behebt die Mängel der schwebenden und absoluten Positionierung sehr gut Terminals verwenden grundsätzlich das Flex-Layout

Ie8 und niedriger unterstützen Flex nicht

Hinweis: Die mittlere Spalte muss in der Mitte platziert werden! ! !

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

Nach dem Login kopieren

4. Verwenden Sie das Tabellenlayout
Vorteile: Die Kompatibilität ist nicht schlecht

Nachteile: Die Inhaltshöhe einer Spalte nimmt zu und die Höhe der anderen beiden Spalten nimmt manchmal auch zu Ich brauche sie nicht. Erhöhen Sie gleichzeitig die Höhe. Dies ist nicht förderlich für das Crawlen von Informationen durch Suchmaschinen. 5. Rasterlayout

Wenn die Höhe bekannt ist entfernt oder die Höhe überschreitet

1.Flex-Layout Die Höhe kann adaptiv sein

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

Nach dem Login kopieren

2. Das Tabellenlayout Odu kann adaptiv sein

3. Floating, absolute Positionierung und Rasterlayout können sich nicht an die Höhe anpassen

Das obige ist der detaillierte Inhalt vonMehrere Möglichkeiten zum Anpassen des Seitenlayouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!