简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
HTML で 3 つの div を水平方向に配置するにはどうすればよいですか?
P粉419164700
P粉419164700 2023-08-21 19:20:03
0
2
520
<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粉419164700
P粉419164700

全員に返信(2)
P粉478445671
P粉4784456712023-08-22 13:51:31 2棟

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

リーリー リーリー

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

いいねを押す +0
返信を追加
P粉842215006
P粉8422150062023-08-22 11:58:42 1棟

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

さらに考慮すべき点:

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

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

リーリー

参考用に jsFiddle もあります。

いいねを押す +0
返信を追加
人気のトピック
詳細>
人気の記事
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！