1 つの div 内に 3 つの div (左/中央/右) を配置するにはどうすればよいですか?

Question

次のように、コンテナ div 内の 3 つの div を整列させたいと考えています。

[[LEFT] [CENTER] [RIGHT]]

コンテナ div の幅は 100% (幅は設定されていません) で、コンテナのサイズを変更した後も中央 div は中央に留まる必要があります。

それで私は次のように設定しました:

<code>#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{マージン:0 自動;幅:100ピクセル;}
</code>

しかし、結果は次のようになりました:

[[左] [中央] ]
                              [右]

何か提案はありますか?

Answer 1

Flexbox を使用して 3 つの div を水平に配置します

これは、div を別の div 内で水平方向に整列させる CSS3 の方法です。

リーリー リーリー

jsフィドル

justify-content 属性には 5 つの値があります:

• flex-start (デフォルト)
• フレックスエンド
＃＃＃中心＃＃＃
• 間のスペース
• スペースアラウンド
すべての場合において、3 つの div は同じ行にあります。各値の説明については、

https://stackoverflow.com/a/33856609/3597276

を参照してください。

---

フレックスボックスの利点:

コード量が少なく、非常に効率的です

1. 垂直方向と水平方向のセンタリングは非常に簡単です
等高線柱は非常にシンプルです
フレックス要素を整列させるための複数のオプション
4. レスポンシブ
5. フロートやテーブルとは異なり、フロートやテーブルはレイアウトの構築には使用されないため、レイアウト機能が制限されています。 Flexbox は、幅広いオプションを備えた最新の (CSS3) テクノロジーです。

---

フレックスボックスの詳細:

Flex アイテムを整列させる方法
CSS フレックスボックスを使用する
• ~ MDN
Flexbox 完全ガイド
• ~ CSS のコツ
フレックスボックスとは何ですか? ！
• ~ YouTube ビデオ チュートリアル

---

ブラウザのサポート: Flexbox は、IE を除くすべての主要なブラウザでサポートされています。 Safari 8 や IE10 などの一部の最近のブラウザ バージョンでは、 ベンダー プレフィックス が必要です。プレフィックスをすばやく追加するには、Autoprefixer を使用します。詳細については、この回答を参照してください。

Answer 2

この CSS を使用して、div を次のように配置します (float が最初):

リーリー

注: 最初に右をフロートし、次に左をフロートし、次に中央をフロートすることもできます。フローティング コンテンツが「メイン」の中央セクションの前に配置されることが重要です。

注: 通常は、#container の最後にこのコードを追加します。 <div style="clear:both;">< /div> では、#center の高さから単に配置するのではなく、#container の高さを垂直方向に拡張して、両側のフローティング コンテンツに対応します。こんな感じ これで両面の内容が底からはみ出すのを防ぎます。