CSSでボックスを並べて表示する方法-CSSチュートリアル-php.cn

CSSでボックスを並べて表示する方法

醉折花枝作酒筹

リリース： 2023-01-05 16:10:39

オリジナル

19975 人が閲覧しました

ボックスを並べて表示する方法: 1. float 属性を使用して並べて表示します。div に "float:right|left;" を設定するだけです。2.並べて表示するにはdisplay属性を使用します。並べて表示するにはdivを設定するだけです。「display:inline;」を設定するだけです。

CSSでボックスを並べて表示する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

まず、CSS スタイルを設定せずに 3 つの div ボックスオブジェクトを設定して、効果を見てみましょう。コードは次のとおりです:

<body>
    <div>第一个盒子</div>
    <div>第二个盒子</div>
    <div>第三个盒子</div>
</body>

ログイン後にコピー

CSSでボックスを並べて表示する方法

div ボックス自体のデフォルトのスタイル属性は、排他的な行を占有することになっています。占有の問題を解決するには、通常 2 つの方法があります。専用行で、1つはfloatを設定する方法、もう1つは表示スタイルを設定する方法です。次に、p boxオブジェクトが横に並んで同列に表示される問題を解決する方法を記事と写真、事例メソッドを通して紹介します。

1. CSS float を使用して並べて表示します

並べて表示されない問題を解決するために、div に float 属性を設定します。 ## 並べて表示される p ボックスは、最も外側のボックスの幅以下であるため、複数の p オブジェクトを並べて表示できます。
注: ①float属性を設定します; ②サイドバイサイドの合計幅は、外側のレイヤーの幅よりも小さくなります。

<style>
div{
    border: 1px solid #000;
    float:left;
}
</style>

ログイン後にコピー

CSSでボックスを並べて表示する方法

#ここでは div に float を設定します。もちろん、実際の使用では、div オブジェクトを行に表示して CSS を追加する必要があります。 cssセレクターset float。他の不要な設定がフローティングスタイルに追加されないようにします。

2. CSS 表示を使用してピアを表示する

display:inline を追加して div ボックスオブジェクトを並べて表示することで問題を解決できます。

div{display:inline} スタイルを div タグに設定し、問題を解決した後にスクリーンショットを撮ります:

<style>
div{
    border: 1px solid #000;
    display: inline;
}
</style>

ログイン後にコピー

CSSでボックスを並べて表示する方法

推奨学習:

CSS ビデオチュートリアル

以上がCSSでボックスを並べて表示する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。