Heim > Artikel > Web-Frontend > Mehrere Möglichkeiten zum Anpassen des Seitenlayouts

Mehrere Möglichkeiten zum Anpassen des Seitenlayouts

一个新手Original: 2017-09-18 10:43:518730Durchsuche

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>

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>

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>

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>

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!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So erstellen Sie ein vertikales CSS-LinealNächster Artikel：So erstellen Sie ein vertikales CSS-Lineal

In Verbindung stehende Artikel

Mehr sehen