Heim > Web-Frontend > CSS-Tutorial > Wie richtet man Div-Blöcke auf derselben horizontalen Linie aus?

Wie richtet man Div-Blöcke auf derselben horizontalen Linie aus?

Linda Hamilton
Freigeben: 2024-11-04 01:00:30
Original
596 Leute haben es durchsucht

How to Align Div Blocks on the Same Horizontal Line?

Div-Blöcke auf derselben horizontalen Linie ausrichten

Beim Versuch, zwei Div-Blöcke auf derselben Linie auszurichten, können HTML und CSS verwendet werden um dieses Layout zu erreichen.

Um die Div-Blöcke horizontal auszurichten, erstellen Sie ein Container-Div mit der ID „block_container“. Geben Sie im CSS die folgenden Eigenschaften für dieses Container-Div an:

#block_container {
    text-align: center;
}
Nach dem Login kopieren

Dadurch werden alle Elemente innerhalb des „block_container“-Div zentriert.

Weisen Sie den beiden Div-Blöcken eindeutige IDs zu wie „Block1“ und „Block2“. Verwenden Sie im CSS die folgenden Eigenschaften:

#bloc1, #bloc2 {
    display: inline;
}
Nach dem Login kopieren

Durch die Einstellung der Anzeige auf Inline werden die div-Blöcke horizontal nebeneinander platziert.

Beispiel-HTML:

<div id="block_container">
    <div id="bloc1"><?php echo " version " . $version . " Copyright &copy; All Rights Reserved."; ?></div>
    <div id="bloc2"><img src="..."></div>
</div>
Nach dem Login kopieren

Beachten Sie, dass die Verwendung geeigneter semantischer Tags für Inhalte empfohlen wird, z. B.

oder , anstatt Rohinhalte direkt in div-Elementen zu platzieren.

Das obige ist der detaillierte Inhalt vonWie richtet man Div-Blöcke auf derselben horizontalen Linie aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage