ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSでボックスを並べて表示する方法
CSSでボックスを並べて表示する方法
- 醉折花枝作酒筹オリジナル
- 2021-04-22 18:04:5319979ブラウズ
ボックスを並べて表示する方法: 1. float 属性を使用して並べて表示します。div に "float:right|left;" を設定するだけです。2.並べて表示するにはdisplay属性を使用します。並べて表示するにはdivを設定するだけです。「display:inline;」を設定するだけです。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
まず、CSS スタイルを設定せずに 3 つの div ボックス オブジェクトを設定して、効果を見てみましょう。コードは次のとおりです:
<body>
<div>第一个盒子</div>
<div>第二个盒子</div>
<div>第三个盒子</div>
</body>
div ボックス自体のデフォルトのスタイル属性は、排他的な行を占有することになっています。占有の問題を解決するには、通常 2 つの方法があります。専用行で、1つはfloatを設定する方法、もう1つは表示スタイルを設定する方法です。次に、p boxオブジェクトが横に並んで同列に表示される問題を解決する方法を記事と写真、事例メソッドを通して紹介します。
1. CSS float を使用して並べて表示します
並べて表示されない問題を解決するために、div に float 属性を設定します。 ## 並べて表示される p ボックスは、最も外側のボックス の幅以下であるため、複数の p オブジェクトを並べて表示できます。
注: ①float属性を設定します; ②サイドバイサイドの合計幅は、外側のレイヤーの幅よりも小さくなります。
<style>
div{
border: 1px solid #000;
float:left;
}
</style>
<style>
div{
border: 1px solid #000;
display: inline;
}
</style>
以上がCSSでボックスを並べて表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。