Wie kann ich zwei Div-Blöcke mithilfe von CSS horizontal ausrichten?

Zwei Div-Blöcke horizontal positionieren

Richten Sie zwei Div-Blöcke mithilfe von CSS- und HTML-Techniken auf derselben horizontalen Linie aus.

Lösung:

CSS:

<code class="css">#block_container {
    text-align: center;
}
#bloc1, #bloc2 {
    display: inline;
}</code>

In diesem CSS:

• Zentrieren Sie das übergeordnete Element Container (#block_container) mit text-align: center, um beide div-Blöcke horizontal auszurichten.
• Setzen Sie die Anzeigeeigenschaft beider div-Blöcke (#bloc1 und #bloc2) auf „inline“, damit sie in derselben Zeile angezeigt werden.

HTML:

<code class="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></code>

Erklärung:

1. Das #block_container div dient als übergeordneter Container für beide div-Blöcke.
2. Die text-align-Eigenschaft von #block_container zentriert den darin enthaltenen Inhalt, einschließlich #bloc1 und #bloc2.
3. Durch Festlegen der display-Eigenschaft auf „inline“ für # bloc1 und #bloc2 werden auf derselben horizontalen Linie angezeigt.

Zusätzliche Hinweise:

• Verwenden Sie stattdessen geeignete HTML-Tags für die Inhaltsplatzierung Platzieren von Rohinhalten in
  s. Für Text verwenden Sie

  oder , zum Beispiel.

• Eine Demonstration dieser Lösung finden Sie auf jsFiddle.

Das obige ist der detaillierte Inhalt vonWie kann ich zwei Div-Blöcke mithilfe von CSS horizontal ausrichten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!