Heim >Web-Frontend >CSS-Tutorial >Mehrere Möglichkeiten zum Anpassen des Seitenlayouts
Mehrere Möglichkeiten zum Anpassen des Seitenlayouts
- 一个新手Original
- 2017-09-18 10:43:518774Durchsuche
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
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
Wenn die Höhe bekannt ist entfernt oder die Höhe überschreitet
<!-- 表格布局解决方案 -->
<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!