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>最初に、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>
以上がCSS で並べて表示される複数の div ボックスのコード共有の例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
