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="/static/imghwm/default1.png" data-src="..." class="lazy" alt="Bagaimanakah saya boleh menyelaraskan dua blok div secara mendatar menggunakan CSS?" ></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.