So implementieren Sie ein zweispaltiges Layout in CSS
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!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1393
52
1205
24
So verwenden Sie Bootstrap in Vue
Apr 07, 2025 pm 11:33 PM
Die Verwendung von Bootstrap in Vue.js ist in fünf Schritte unterteilt: Startstrap installieren. Bootstrap in main.js. Verwenden Sie die Bootstrap -Komponente direkt in der Vorlage. Optional: benutzerdefinierter Stil. Optional: Verwenden Sie Plug-Ins.
Die Rollen von HTML, CSS und JavaScript: Kernverantwortung
Apr 08, 2025 pm 07:05 PM
HTML definiert die Webstruktur, CSS ist für Stil und Layout verantwortlich, und JavaScript ergibt eine dynamische Interaktion. Die drei erfüllen ihre Aufgaben in der Webentwicklung und erstellen gemeinsam eine farbenfrohe Website.
So schreiben Sie geteilte Zeilen auf Bootstrap
Apr 07, 2025 pm 03:12 PM
Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.
HTML, CSS und JavaScript verstehen: Ein Anfängerhandbuch
Apr 12, 2025 am 12:02 AM
WebdevelopmentRelieSonHtml, CSS und JavaScript: 1) HtmlStructuresContent, 2) CSSstylesit und 3) JavaScriptaddssinteraktivität, Bildung von TheBasisofModerernwebexperiences.
So verwenden Sie die Bootstrap -Taste
Apr 07, 2025 pm 03:09 PM
Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen
So richten Sie das Framework für Bootstrap ein
Apr 07, 2025 pm 03:27 PM
Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.
So fügen Sie Bilder auf Bootstrap ein
Apr 07, 2025 pm 03:30 PM
Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.
So ändern Sie Bootstrap
Apr 07, 2025 pm 03:18 PM
Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.
