Heim > Artikel > Web-Frontend > So implementieren Sie ein zweispaltiges Layout in CSS
So implementieren Sie ein zweispaltiges Layout in CSS
- 青灯夜游Original
- 2021-07-22 15:33:426019Durchsuche
Methode: 1. Setzen Sie „dislpay:inline-block“ auf beide Box-Elemente. 2. Setzen Sie beide Box-Elemente auf Float. 3. Das linke Element mit fester Breite wird auf „Margin-Left“ gesetzt. und der Wert ist größer als die feste Breite des Elements 4. Floating + BFC 5. Absolute Positionierung + Rand links usw.
Die Betriebsumgebung dieses Tutorials: Windows7-System, CSS3- und HTML5-Version, Dell G3-Computer.
1. Was ist ein zweispaltiges Layout?
Es gibt zwei Arten von zweispaltigen Layouts: eines mit fester Breite auf der linken und adaptives auf der rechten Seite und das andere mit adaptiver Breite in beiden Spalten (das Das heißt, die Breite auf der linken Seite wird vom untergeordneten Element bestimmt und der verbleibende Raum wird auf der rechten Seite ausgefüllt. CSS-Interviewfragen sind häufige Testfragen und auch Fähigkeiten, die ein Front-End-Entwicklungsingenieur beherrschen muss. Die Implementierungsmethoden werden im Folgenden vorgestellt.
2. Wie erreicht man eine feste Breite auf der linken Seite und eine adaptive Anpassung auf der rechten Seite?
1. Doppelter Inline-Block
Prinzip: Um den Einfluss von HTML-Leerzeichen zu eliminieren, muss die Schriftgröße des übergeordneten Elements festgelegt werden auf 0 gesetzt, und die rechte Seite muss auf 0 gesetzt werden. Die Breite des adaptiven Elements wird mit der Berechnungsfunktion berechnet. Wenn die Höhen der beiden Elemente unterschiedlich sind, können Sie die vertikale Ausrichtung: oben für die Elemente festlegen.
Nachteile: Da die Schriftgröße des übergeordneten Elements auf 0 eingestellt ist, wird der Text im untergeordneten Element nicht angezeigt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
font-size:0;
}
.left{
display: inline-block;
width: 100px;
height: 200px;
background-color: red;
vertical-align: top;
}
.right{
display: inline-block;
width: calc(100% - 100px);
height: 400px;
background-color: blue;
vertical-align: top;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<span>1234</span>
</div>
<div class="right">
<span>1234</span>
</div>
</div>
</body>
</html>2. Doppeltes Float-Prinzip: Die beiden Elemente sind auf Float eingestellt, und die rechte Seite ist auf Float eingestellt. Verwenden Sie die Berechnungsfunktion, um die Breite des adaptiven Elements zu berechnen
Nachteile: Das übergeordnete Element muss den Float löschen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right{
float: left;
width: calc(100% - 100px);
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<span>
123adadadddddddddddddddddddddddddddddddddddddddd
</span>
</div>
<div class="right"></div>
</div>
</body>
</html>
3. Float + Rand
Prinzip: Das Element mit fester Breite auf der linken Seite ist schwebend und das adaptive Element auf der rechten Seite wird mit Rand festgelegt. Der Wert von -left kann größer sein als die Breite des Elements mit fester Breite
Nachteile: Das übergeordnete Element muss den Float löschen. 4. Floating + BFC. Prinzip: Das übergeordnete Element legt den Überlauf fest: versteckt, links overflow:auto to create BFC
Nachteil: Wenn der Inhalt des linken Elements die eingestellte Breite überschreitet, überlappt er das rechte Element
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right{
margin-left: 100px;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
<p>1234</p>
</div>
<div class="right">
<p>1234</p>
</div>
</div>
</body>
</html>
5.absolute+margin -left
Prinzip: Das übergeordnete Element ist relativ positioniert, das linke Element ist absolut positioniert und das rechte adaptive Element legt den Wert für den linken Rand so fest, dass er größer ist als die Breite des Elements mit fester Breite.
Nachteile: Das übergeordnete Element ist auf relativ eingestellt Positionierung
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
overflow: hidden;
}
.left{
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right{
overflow: auto;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left">111111111111111111111111</div>
<div class="right">111111111111111111111111111111111111111111111</div>
</div>
<div class="right"></div>
</body>
</html>
6.flex-Layout
Prinzip: Anzeige übergeordneter Elementsätze: Flex, adaptive Elementsätze Flex: 1
Nachteile: Es gibt Kompatibilitätsprobleme, die unter IE10 nicht unterstützt werden
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
position: relative;
}
.left{
position: absolute;
width: 100px;
height: 200px;
background-color: red;
}
.right{
margin-left: 100px;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html> 3. Die Elemente auf der linken und rechten Seite sind beide adaptivStreng genommen bedeutet dies nicht, dass beide Elemente adaptiv sind, sondern nur, dass die feste Breite oben so geändert wird, dass sie von den untergeordneten Elementen gestreckt wird
1. Floating + BFC
Das Prinzip ist das gleiche wie oben, außer dass die Breite des linken Elements nicht festgelegt ist und durch die untergeordneten Elemente gestreckt wird
Prinzip: das übergeordnete Element display:table und das linke Element wird außen mit einem div umschlossen. Dieses div ist auf display:table-cell, width: 0,1 % (garantierte Mindestbreite) eingestellt, margin-right wird innerhalb des linken Elements festgelegt und display:table-cell wird auf das richtige Element gesetzt. Nachteile: IE7 und niedriger werden nicht unterstützt. Bei Verwendung von display:table ist die Auffüllung ungültig, das Attribut line-height des übergeordneten Elements ist ungültig und bei Verwendung von display:table-cell ist der Rand ungültig.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.box{
height: 600px;
width: 100%;
display: flex;
}
.left{
width: 100px;
height: 200px;
background-color: red;
}
.right{
flex: 1;
height: 400px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
3.Flex Layout
über das Prinzip und die Nachteile von Over -Over -Over -Over sind die gleichen wie Flex -Layouts4. Spalten: Auto 1fr; zeigt an, dass der Browser die Länge bestimmt. fr ist eine relative Größeneinheit, die angibt, dass der verbleibende Platz gleichmäßig aufgeteilt ist. Gitterlücke: 20 Pixel (Zeilenabstand)
Nachteile: Die Kompatibilität ist zu schlecht, IE11 wird nicht unterstützt. Es kann nur Google 57 oder höher verwendet werden
Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein zweispaltiges Layout in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
In Verbindung stehende Artikel
Mehr sehen- So erreichen Sie eine horizontale Textanordnung in CSS
- So implementieren Sie einen Wellenlinienrand in CSS
- So installieren Sie CSS3PS
- So erreichen Sie einen Deckkraftgradienten in CSS
- So führen Sie den CSS-Stil in ASP ein
- Was soll ich tun, wenn der Prozentsatz der CSS-Höheneinstellung nicht wirksam wird?
- So laden Sie eine CSS-Datei