Bagaimanakah saya boleh menyelaraskan dua blok div secara mendatar menggunakan CSS?

Letakkan Dua Blok Div ​​Secara Mendatar

Jajarkan dua blok div pada garisan mendatar yang sama dengan menggunakan teknik CSS dan HTML.

Penyelesaian:

CSS:

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

Dalam CSS ini, kami:

• Memusatkan ibu bapa bekas (#block_container) menggunakan text-align: tengah untuk menjajarkan kedua-dua blok div secara mendatar.
• Tetapkan sifat paparan kedua-dua blok div (#bloc1 dan #bloc2) kepada sebaris untuk menjadikannya kelihatan pada baris yang sama.

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>

Penjelasan:

1. Div #block_container berfungsi sebagai bekas induk untuk kedua-dua blok div.
2. Sifat penjajaran teks #block_container memusatkan kandungan di dalamnya, termasuk kedua-dua #bloc1 dan #bloc2.
3. Dengan menetapkan sifat paparan kepada sebaris untuk # bloc1 dan #bloc2, ia dipaparkan pada garis mendatar yang sama.

Nota Tambahan:

• Gunakan teg HTML yang sesuai untuk peletakan kandungan dan bukannya meletakkan kandungan mentah dalam
  s. Untuk teks, gunakan

  atau , sebagai contoh.

• Pertunjukan penyelesaian ini boleh didapati di jsFiddle.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyelaraskan dua blok div secara mendatar menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!