検索

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

HTML で 3 つの div を水平方向に配置するにはどうすればよいですか?

<p>3 つの水平パーティションを持つサンプル Web サイトを作成しています。 左端のパーティションの幅を 25%、中央のパーティションの幅を 50%、右のパーティションの幅を 25% にして、パーティションが水平方向のスペースの 100% を占めるようにします。 </p> <pre class="brush:php;toolbar:false;"><html> <タイトル> ウェブサイトのタイトル </title> <div id="全体" style="高さ:100%; 幅:100%" > <div id="leftThing" style="位置: 相対; 幅:25%; 背景色:青;"> 左側のメニュー </div> <div id="content" style="位置: 相対; 幅:50%; 背景色:緑;"> ランダムなコンテンツ </div> <div id="rightThing" style="位置: 相対; 幅:25%; 背景色: yellow;"> 右メニュー </div> </div> </html></pre> <p>https://i.stack.imgur.com/NZDJe.jpg</p> <p>このコードを実行すると、div が重なって表示されます。並べて登場させたいです！ </p> <p>どうすればいいですか? </p>
P粉419164700P粉419164700520日前581

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

  • P粉478445671

    P粉4784456712023-08-22 13:51:31

    これが非常に古い質問であることは承知しています。 FlexBoxを使用した、この問題の解決策をここに投稿します。解決策は次のとおりです:

    リーリー リーリー

    display:flex をコンテナに追加するだけです。フロートを使用する必要はありません。

    返事
    0
  • P粉842215006

    P粉8422150062023-08-22 11:58:42

    この状況に対処するために float を使用しないことをお勧めします。inline-block を使用することを好みます。

    さらに考慮すべき点:

    • インラインスタイルは保守性に悪影響を及ぼします
    • セレクター名にはスペースを含めないでください
    • <head> や <body>
      • など、いくつかの重要な HTML タグが無視されています。
    • doctype
      • が含まれていません

    ドキュメントをフォーマットするより良い方法は次のとおりです:

    リーリー

    参考用に jsFiddle もあります。

    返事
    0
  • キャンセル返事