ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS を使用して 2 つの div ブロックを水平に配置するにはどうすればよいですか?

CSS を使用して 2 つの div ブロックを水平に配置するにはどうすればよいですか?

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-03 16:40:03974ブラウズ

How can I align two div blocks horizontally using CSS?

2 つの Div ブロックを水平に配置します

CSS と HTML テクニックを利用して、2 つの div ブロックを同じ水平線上に配置します。

解決策:

CSS:

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

この CSS では、

  • 親を中央揃えにします。コンテナ (#block_container) を text-align: center を使用して、両方の div ブロックを水平に配置します。
  • 両方の div ブロック (#bloc1 と #bloc2) の表示プロパティをインラインに設定して、同じ行に表示されます。

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>

説明:

  1. #block_container div は、両方の div ブロックの親コンテナです。
  2. #block_container の text-align プロパティは、#bloc1 と #bloc2 の両方を含むコンテンツをその中の中央に配置します。
  3. # の表示プロパティをインラインに設定することで、 bloc1 と #bloc2 は、同じ水平線上に表示されます。

追加メモ:

  • コンテンツの配置には、代わりに適切な HTML タグを使用してください。生のコンテンツを
    に配置します。テキストの場合は、

    を使用します。

  • このソリューションのデモは jsFiddle にあります。

以上がCSS を使用して 2 つの div ブロックを水平に配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:絶対位置決めが正しい選択となるのはどのような場合ですか?次の記事:絶対位置決めが正しい選択となるのはどのような場合ですか?

関連記事

続きを見る