Heim >Web-Frontend >HTML-Tutorial >Wie können wir in HTML drei Teile nebeneinander platzieren?
Wie können wir in HTML drei Teile nebeneinander platzieren?
- WBOYnach vorne
- 2023-09-04 23:21:051037Durchsuche
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.
Grammatik
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. <div class='division'>Content…</div>
Die chinesische Übersetzung von Beispiel 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>
Beispiel 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>
Beispiel 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>
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!