HTML Div を並べて配置

1. float プロパティを使用する
2. flexbox プロパティを使用する
3. css グリッド を使用する

この投稿では、HTML ドキュメントで 2つの div 要素を並べて表示するためのさまざまな方法について説明します。

float プロパティを使用する

float CSS プロパティを使用すると、コンテナの左側または右側に配置された要素をテキストおよびインライン要素で囲むことができます。 要素は、通常のフローの一部でなくても、ページのフローに含まれます。

構文：

float: $value;

この値は、left、right、none、inline-start、inline-end などのようなものです。

前の概念をさらに理解するために、次の例を検討してください。

<div class="float-parent">
  <div class="float-child">Float Child 1</div>
  <div class="float-child">Float Child 2</div>
</div>

.float-parent {
    padding: 20px;
}

.float-child {
    width: 45%;
    float: left;
    padding: 20px;
    border: 1px dotted black;
}

前の例では、各 div をフローティングして、float 属性を使用して並べて配置しています。 どちらも左側に浮いているため、十分なスペースがある場合は並べて表示されます。

.float-child div が 2つあり、それぞれ width が 45% であるため、これらは収まります。

HTML と互換性のあるブラウザで上記のコード行を実行します。 次の結果が表示されます。

flexbox プロパティを使用する

float または positioning を必要とせずに、Flexible Box Layout モジュールを使用すると、柔軟で応答性の高いレイアウト構造を簡単に開発できます。 Flexbox はモバイル対応でレスポンシブなので、小規模なレイアウトの設計に便利です。

前の概念をさらに理解するために、次の例を検討してください。

<div class="flex-parent">
  <div class="flex-child">Flex Child 1</div>
  <div class="flex-child">Flex Child 2</div>
</div>

.flex-parent {
    display: flex;
    padding: 20px;
}

.flex-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

前の例では、display: flex; を設定しました。 flexbox のクラス .flex-parent 要素を使用して、親 div コンテナで。 これにより、flexbox がアクティブになります。

次に、flex: 1; を設定します。 各 .flex-child div 要素内。 この数値は、親フレックス要素内の各子フレックス要素の幅の比率として機能します。

それらは同一であるため、使用可能なスペースを均等に共有します。 2つの子 div コンポーネントがあります。 したがって、各 div はスペースの 50% を占めます。

HTML と互換性のあるブラウザで上記のコード行を実行します。 次の結果が表示されます。

css グリッド を使用する

CSS グリッドレイアウトは、ページを主要な領域に分割し、HTML プリミティブ ベースのコントロールのコンポーネント間の接続を指定するのに優れています。

grid の重要な変更点の 1つは、最初にグリッド テンプレートがどのように見えるかを選択することです。 レイアウトで必要な列および/または行の数を参照します。

前の概念をさらに理解するために、次の例を検討してください。

<div class="grid-parent">
    <div class="grid-child">
        Grid Child 1
    </div>
    <div class="grid-child">
        Grid Child 2
    </div>
</div>

.grid-parent {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-child {
    flex: 1;
    padding: 20px;
    border: 1px dotted black;
}

この例では、幅が等しい 2つの列が必要です。 そこで、display: grid; を使用します。 クラス.grid-container要素を介して親div要素でgridを有効にするプロパティ。

次に grid-template-columns パラメータを使用して、レイアウトに必要な数の列を追加します。

同じ幅の 2つの列が必要なため、1fr 1fr に設定します。 これは、各列の間に 1 fr = 分数単位 の間隔を持つ 2 列のレイアウトを生成するようブラウザに指示します。

flexbox アプローチで使用した flex: 1 ルールは、fr 単位に似ています。これは、ある列と別の列の比率です。 列が 1fr 1fr に設定されている場合、各列は同じ量のスペースを使用します。

HTML と互換性のあるブラウザで上記のコード行を実行します。 次の結果が表示されます。

デモ