Wie richtet man mehrere DIV-Blöcke horizontal aus?

Mehrere DIV-Blöcke horizontal ausrichten

Das Platzieren mehrerer DIV-Blöcke auf derselben horizontalen Linie ist eine häufige Layoutaufgabe in der Webentwicklung. Um dies zu erreichen, befolgen Sie die unten beschriebenen Schritte:

Setzen Sie einen Parent DIV mit text-align: center; um die untergeordneten Elemente horizontal auszurichten.

Stellen Sie innerhalb des übergeordneten DIV die untergeordneten DIVs so ein, dass Folgendes angezeigt wird: inline;. Dadurch können sie Seite an Seite in derselben Linie sitzen.

<code class="css">#block_container {
  text-align: center;
}

#bloc1,
#bloc2 {
  display: inline;
}</code>

Beispielinhalt:

<code class="html">&lt;div id=&quot;block_container&quot;&gt;
  &lt;div id=&quot;bloc1&quot;&gt;&lt;?php echo &quot; version &quot; . $version . &quot; Copyright &amp;copy; All Rights Reserved.&quot;; ?&gt;&lt;/div&gt;
  &lt;div id=&quot;bloc2&quot;&gt;&lt;img src=&quot;...&quot;&gt;&lt;/div&gt;
&lt;/div&gt;</code>

Zusätzliche Überlegungen:

• Vermeiden Sie es, Rohinhalte direkt in DIV-Elementen zu platzieren. Verwenden Sie geeignete Tags wie <p> oder <span> stattdessen.
• Beispiel: <pre><p id="bloc1"><?php echo " version ".$version." Copyright © Alle Rechte vorbehalten."; ?></p></pre>

Demo:
https://jsfiddle.net/

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