Heim >Web-Frontend >CSS-Tutorial >Drei Möglichkeiten, ein dreispaltiges Layout mit CSS (mit Code) zu implementieren
Drei Möglichkeiten, ein dreispaltiges Layout mit CSS (mit Code) zu implementieren
- 不言Original
- 2018-08-09 11:15:032020Durchsuche
Dieser Artikel stellt Ihnen die drei Möglichkeiten vor, ein dreispaltiges Layout in CSS zu implementieren (mit Code). Ich hoffe, dass er für Sie hilfreich ist.
Floating-Layout
ist in drei Divs unterteilt, und ein anderes übergeordnetes Element enthält diese drei Divs unter Verwendung von Float,
Hinweis: drei Divs, links - -> rechts ---> Mitte in dieser Reihenfolge
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 300px;
height: 100px;
background-color: red;
}
.right {
float: right;
width: 300px;
height: 100px;
background-color: blue;
}
.center {
margin: 0px 300px 0px 300px;
background-color: black;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="left">1</div>
<div class="right">2</div>
<div class="center">3</div>
</div>
</body>
</html> Flex
Stellen Sie das mittlere Feld FLex: 1 ein, damit Sie die Anpassung anpassen können, Standard horizontale Anordnung
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.father {
display: flex;
}
.left {
width: 300px;
height: 100px;
background-color: red;
}
.center {
flex:1;
height: 100px;
background-color: black;
}
.right {
width: 300px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="father">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>Flex-bezogene Wissenspunkte, allgemein verwendet
1. Anzeige einstellen: Flex
2. Containerdiagramm:
Achse: horizontale Hauptachse und vertikale Querachse
flex-direction: die Richtung der Hauptachse, row-reverse |
flex -wrap: Zeilenumbruch, nowrap |. wrap-reverse;
flex-flow: Abkürzung für Flex-Direction und Flex-Wrap
justify-content: Ausrichtung auf der Hauptachse, Flex -start |. space-around;
Alignment auf der Querachse, flex-end | 🎜>
Absolute Positionierungsausrichtung
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.one {
background-color: red;
position: absolute;
left: 0;
width: 300px;
height: 100px;
}
.two {
left: 300px;
right: 300px;
background-color: blue;
position: absolute;
height: 100px;
}
.three {
right: 0px;
width: 300px;
background-color: yellow;
position: absolute;
height: 100px;
}
</style>
</head>
<body>
<div class="father">
<div class="one">1</div>
<div class="two">1</div>
<div class="three">1</div>
</div>
</body>
</html>Empfohlene verwandte Artikel:
Wie zentriert man beim Entwerfen einer Front-End-Webseite? Navigationsleiste ausrichten? (Code tatsächlicher Test)
Was sind die CSS-Layouts? Gängige CSS-Layoutmethoden (mit Code)
Das obige ist der detaillierte Inhalt vonDrei Möglichkeiten, ein dreispaltiges Layout mit CSS (mit Code) zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!