ホームページ  >  に質問  >  本文

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

<p>次のように、コンテナ div 内の 3 つの div を整列させたいと考えています。 </p> <pre class="brush:php;toolbar:false;">[[LEFT] [CENTER] [RIGHT]]</pre> <p>コンテナ div の幅は 100% (幅は設定されていません) で、コンテナのサイズを変更した後も中央 div は中央に留まる必要があります。 </p> <p>それで私は次のように設定しました: </p> <pre class="lang-css prettyprint-override"><code>#container{width:100%;} #left{float:left;width:100px;} #right{float:right;width:100px;} #center{マージン:0 自動;幅:100ピクセル;} </code></pre> <p>しかし、結果は次のようになりました: </p> <pre class="brush:php;toolbar:false;">[[左] [中央] ] [右]</pre> <p>何か提案はありますか? </p>
P粉092778585P粉092778585425日前390

全員に返信(2)返信します

  • P粉291886842

    P粉2918868422023-08-22 10:44:15

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

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

    リーリー リーリー

    jsフィドル

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

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

    を参照してください。


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

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

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

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

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

    返事
    0
  • P粉029057928

    P粉0290579282023-08-22 00:47:05

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

    リーリー

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

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

    返事
    0
  • キャンセル返事