3つのdiv（左/中央/右）を別のdiv内に配置するにはどうすればよいですか？

How Align 3 Divs Inside Another Div

解決：

そのCSSを使用して、divを次のように配置します（最初にフロートします）。

  
  追伸 右、左、中央の順にフロートすることもできます。重要なことは、フロートが「メイン」中央セクションの前に来ることです。

 
 
  P.P.S. あなたはしばしば最後の内側が欲しい#containerこのスニペット：延長します#containerは、高さをからのみ取得するのではなく、両側のフロートを含むように垂直に配置します#centerそしておそらく側面が底から突き出るのを許します。
  
Flexboxを使用して3つのDivを水平に配置する
 
これは、divを別のdiv内で水平に整列させるためのCSS3メソッドです。
 
 
 
#container {display：flex; / *フレックスコンテナを確立します* / flex-direction：row; / *デフォルト値;省略できます* / flex-wrap：nowrap; / *デフォルト値;省略できます* / justify-content：space-between; / *デフォルトから切り替えました（flex-start、以下を参照）* / background-color：lightyellow; } #container> div {width：100px;高さ：100px;境界線：2pxの破線の赤; }
  
jsFiddle
 
NSjustify-contentプロパティは5つの値を取ります：
 
 
フレックススタート（デフォルト）
 
フレックスエンド
 
中心
 
スペースビトウィーン
 
スペースアラウンド
 
 
すべての場合において、3つのdivは同じ行にあります。各値の説明については、https：//stackoverflow.com/a/33856609/3597276を参照してください。
 
 
  フレックスボックスの利点：  
 
 
 
 
最小限のコード。非常に効率的
 
垂直方向と水平方向の両方でのセンタリングはシンプルで簡単です
 
等高さのカラムはシンプルで簡単です
 
フレックス要素を整列させるための複数のオプション
 
レスポンシブです
 
レイアウトの構築を目的としていなかったためにレイアウト容量が制限されているフロートやテーブルとは異なり、flexboxは幅広いオプションを備えた最新の（CSS3）手法です。
 
 
 
  フレックスボックスの詳細については、以下をご覧ください。  
 
 
フレックスアイテムを整列させる方法
 
CSSフレキシブルボックスの使用〜MDN
 
Flexboxの完全ガイド〜CSS-トリック
 
フレックスボックスとは？！ 〜YouTubeビデオチュートリアル
 
 
 
    ブラウザのサポート：     Flexboxは、IEを除くすべての主要なブラウザでサポートされています<10. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add prefixes use Autoprefixer. More details in this answer.  
  
HTML構造を変更したくない場合は、追加して変更することもできます。text-align：center;ラッパー要素と表示：インラインブロック;中央の要素に。
 
#container {幅：100％; text-align：center; } #left {float：left;幅：100px; } #center {display：inline-block;マージン：0自動;幅：100px; } #right {float：right;幅：100px; }
ライブデモ：http：//jsfiddle.net/CH9K8/