CSS で並べて表示される複数の div ボックスのコード共有の例-CSSチュートリアル-php.cn

CSS で並べて表示される複数の div ボックスのコード共有の例

黄舟

リリース： 2017-07-22 10:32:22

オリジナル

12290 人が閲覧しました

1. div で 1 行 2 列の 2 列の DIV レイアウトを実装する方法、div で 2 列、1 行と 2 列を並べた DIV レイアウトチュートリアルの解決策
2 つの DIV ボックスを並べて実現するには、 1 行に 2 列の DIV レイアウトのみを表示し、浮動小数点にするには width + float を使用します。 1 行に 2 列を表示する DIV レイアウトを実装します。
最初のケースでは、float は同じです
2 つの div ボックスの float 値を同じにし、たとえば float:left または float:right を設定し、幅を適切に設定します。ここでは、1 行 2 列の DIV レイアウトを実装する場合を使用します。
1)、完全な DIV+CSS コードの例:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-a{ float:left;width:49%;border:1px solid #F00} 
.div-b{ float:left;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-a">第一个DIV盒子</div> 
<div class="div-b">第二个DIV盒子</div> 
</body> 
</html>

ログイン後にコピー

2)、3 番目の DIV が横に並ばないよう、DIV を 1 行 2 列にレイアウトする場合は、幅に注意する必要があります。ここで幅を設定して計算する必要があります (ここでパーセンテージを設定します。幅は 49%)。3 つの DIV ボックスの幅の合計は親の幅より大きく、2 つの DIV の幅の合計は親の幅より小さい場合、並べて実現できる DIV は 2 つだけです。
3) 2 番目のケースでは、float 値が異なります。1 つは float:left に設定され、もう 1 つは float:right に設定されます。
完全なHTMLソースコード:

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>两个DIV并排</title> 
<style> 
.div-c{ float:left;width:49%;border:1px solid #F00} 
.div-d{ float:right;width:49%;border:1px solid #000} 
</style> 
</head> 
<body> 
<div class="div-c">第三个DIV盒子</div> 
<div class="div-d">第四个DIV盒子</div> 
</body> 
</html>

ログイン後にコピー

2. DIVs_CSSの水平配置複数のdivボックスを並べて表示し、divを水平に配置するにはどうすればよいですか?

最初に、CSS スタイルを設定せずに 3 つの div ボックスオブジェクトをセットアップして、効果を確認します。コードは次のとおりです:
一緒に表示されない div のスクリーンショット
3 つの div ボックスが排他的な行に表示されます
div ボックス自体のデフォルトのスタイル属性は、排他的な行を占有します。通常、この問題を解決するには 2 つの方法があります。 div が排他的な行を占める問題は、1 つは float を設定すること、もう 1 つは表示スタイルを設定することです。次にdivボックスのオブジェクトを横に並べて横に表示する問題の解決方法を記事＋写真＋事例で紹介していきます。
1. 並べて表示するには css float を使用します
並べて表示する div ボックスの合計幅が 1 である限り、div に float 属性を設定することで、並べて表示の問題を解決できます。最も外側のボックスの幅以下であれば、複数の div オブジェクトを並べて表示できます。
floatを追加してdivボックスの並べて表示を実現
floatを追加して複数のdivを並べて表示を実現
ここでは、必要に応じてdivにfloatを設定します。 div オブジェクトを連続して表示するには、css クラスを追加します。CSS セレクター設定のフロートを表示します。他の不要な設定がフローティングスタイルに追加されないようにします。
2. CSS 表示を使用して div ボックスオブジェクトを並べて表示します。
div ボックスオブジェクトを並べて表示するには、display:inline を追加することで問題を解決できます。水平方向に並べて表示する必要のない他の div ボックスオブジェクトを区別するために、同じ行に表示する必要がある隣接する div ボックスには統一された太字の CSS クラスを使用します。CSS の名前は「.div-」です。列をなして"。
CSS コードは次のとおりです:

.div-inline{ display:inline}

ログイン後にコピー

Html コードスニペット:

<div class="div-inline">第一个div盒子</div> 
<div class="div-inline">第二个盒子</div> 
<div class="div-inline">第三个盒子</div>

ログイン後にコピー

3. 概要: 並べて表示するには、float または display のどちらでも、並べて表示したい場合は、まず、横に並べて表示できるように、全体の幅がオブジェクトの上部の幅以下である必要があります。ディスプレイは水平配置と植字レイアウトを実現します。

以上がCSS で並べて表示される複数の div ボックスのコード共有の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

CSS で並べて表示される複数の div ボックスのコード共有の例