ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでブロックレベルの要素を並べて表示するにはどうすればよいですか?

CSSでブロックレベルの要素を並べて表示するにはどうすればよいですか?

黄舟
黄舟オリジナル
2017-07-22 10:33:447229ブラウズ

質問: 2 つのブロックレベル要素を同じ行に作成するにはどうすればよいですか?

答え:

1. float 属性を設定します (^o^)/~

ブロックレベル要素の CSS 形式を float: left/right に設定します。たとえば、パネル A とパネル B の 2 つがあります。これらを同じ行に配置したい場合は、A の CSS 形式を float: left/right に設定するだけです。 (注: A の float 属性を設定するだけです。B の float 属性を設定すると、B 以降の要素も同じ行に配置されます。) この方法を使用すると、2 つのブロックレベルの要素がそれぞれの隣に配置されます。他の。効果の例:

2. 表示を inline-block に設定します。つまり、CSS コードを display:inline-block として記述します。この方法を使用すると、2 つのブロックレベル要素の間に一定のギャップが生じます。この方法は前の方法と同じですが、B の属性の代わりに A の表示属性を設定する必要があることに注意してください。効果例:

以上がCSSでブロックレベルの要素を並べて表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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