Tags definieren die Unterteilungen eines HTML-Dokuments. Dieses Tag wird hauptsächlich zum Gruppieren ähnlicher Inhalte für eine einfache Gestaltung verwendet und dient auch als Container für HTML-Elemente.
Wir platzieren drei Abschnitte nebeneinander in HTML mithilfe von CSS-Eigenschaften -Tags. Hierzu wird die CSS-Eigenschaft float verwendet.
Das Folgende ist die Syntax des Hier ist ein Beispiel für das nebeneinander Platzieren von drei Partitionsklassen in HTML mithilfe von CSS-Eigenschaften. Das Folgende ist die Ausgabe des obigen Beispielprogramms. Wir ändern den Stil mithilfe von CSS-Eigenschaften. Wir können Stileigenschaften auch überschreiben. Ein weiteres Beispiel für drei -Tags, die nebeneinander auf einer HTML-Seite platziert sind, ist wie folgt - Hier ist ein Beispiel für das nebeneinander Platzieren von drei Partitionsklassen in HTML mithilfe von CSS-Eigenschaften. Das Folgende ist die Ausgabe des obigen Beispielprogramms. -Tags.
Die chinesische Übersetzung von <div class='division'>Content…</div>
Nach dem Login kopierenBeispiel 1
lautet: Beispiel 1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.parent {
border: 1rem solid green;
margin: 1rem;
padding: 1rem 1rem;
text-align: center;
}
.division {
display: inline-block;
border: 1px solid aquamarine;
padding: 1rem 1rem;
}
</style>
</head>
<body>
<div class='parent'>
<div class='division'>div tag 1</div>
<div class='division'>div tag 2</div>
<div class='division'>div tag 3</div>
</div>
</body>
</html>
Nach dem Login kopierenBeispiel 2
lautet: Beispiel 2
<!DOCTYPE html>
<html>
<head>
<title>HTML div</title>
</head>
<body>
<div style="width: 100px; float:left; height:100px; background:gray; margin:10px">
First DIV
</div>
<div style="width: 100px; float:left; height:100px; background:yellow; margin:10px">
Second DIV
</div>
<div style="width: 100px; float:left; height:100px; background:red; margin:10px">
Third DIV
</div>
</body>
</html>
Nach dem Login kopierenBeispiel 3 – Durch die Erstellung eines geteilten Bildschirms
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.split {
height: 100%;
width: 50%;
position: fixed;
top: 0;
}
.left {
left: 50%;
background-color: yellowgreen;
}
.middle{
background-color: blueviolet
}
.right {
right: 25%;
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="split left">
</div>
<div class="split middle"></div>
<div class="split right">
</div>
</body>
</html>
Nach dem Login kopieren
Das obige ist der detaillierte Inhalt vonWie können wir in HTML drei Teile nebeneinander platzieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
