HTML で 3 つの div を水平方向に配置するにはどうすればよいですか?
P粉419164700
2023-08-21 19:20:03
<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>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
これが非常に古い質問であることは承知しています。 FlexBoxを使用した、この問題の解決策をここに投稿します。解決策は次のとおりです:
display:flexをコンテナに追加するだけです。フロートを使用する必要はありません。この状況に対処するために float を使用しないことをお勧めします。
inline-blockを使用することを好みます。さらに考慮すべき点:
<head>や<body>doctypeドキュメントをフォーマットするより良い方法は次のとおりです:
リーリー参考用に jsFiddle もあります。