ホームページ  >  記事  >  ウェブフロントエンド  >  CSSでボックスを並べて表示する方法

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

醉折花枝作酒筹
醉折花枝作酒筹オリジナル
2021-04-22 18:04:5319943ブラウズ

ボックスを並べて表示する方法: 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 サイトの他の関連記事を参照してください。

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