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

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

Patricia Arquette
リリース: 2024-11-03 15:40:03
オリジナル
474 人が閲覧しました

How do I align two Div blocks on the same line using CSS?

2 つの Div ブロックを同じ行に配置する

2 つの div ブロックを同じ行に配置するには、text-align や display などの CSS プロパティを使用できます。

CSS:

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

#bloc1, #bloc2 {
    display: inline;
}</code>
ログイン後にコピー

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>
ログイン後にコピー

適切な配置を確保するには、次のガイドラインに従ってください:

  • div ブロックをコンテナ div (#block_container) でラップし、その text-align を center に設定します。
  • div ブロック (#bloc1 および #bloc2) の表示プロパティをインラインに設定します。
  • ベスト プラクティスとして、生のコンテンツを div タグに直接配置することは避け、代わりに

    のようなセマンティック タグを使用してください。または <スパン>

これらのスタイルを適用すると、2 つの div ブロックがコンテナ内の同じ行に水平に整列します。

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート