0

以下のコードは、W3CSchool の例からのものです。

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:80%;">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

コードをコピーして、以下のエディターに貼り付けることができます: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_layout_divs

「メニュー」の幅を 20%、「コンテンツ」の幅を 80% に指定しましたが、「コンテンツ」の右側に空白領域があるのはなぜですか?

「コンテンツ」の CSS スタイルに「float:left」を追加した場合にのみ、適切に配置されます。なぜそのような振る舞いをするのか理解できません。誰でも説明できますか？

手伝ってくれてありがとう。

4

4 に答える 4

3

これは、menuおよびのコンテナの幅contentがに設定されているため500pxです。

ページ全体を表示する場合は、に設定し100%ます。

<div id="container" style="width:100%">

また、コンテンツに残りのスペースをすべて単純に使用させたい場合は、幅を割り当てないでください。

<div id="content" style="background-color:#EEEEEE; height:200px">Content goes here</div>

完全に機能するコードは次のとおりです。

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:100%">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:20%;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px">
Content goes here</div>

<div id="footer" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>
于 2013-01-14T08:27:25.937 に答える
1

フローティング div は常に他の div の上に浮かぶため、フローティング div がコンテンツ divと重なるため、ページの右側に空白の領域があります(例を表示するには、メニューの背景色を削除してみてください)。コンテンツ div に float right/left を適用すると、メニュー div と一緒にフロートするため、すべてのスペースが占有されます。

このサイトを参照してください

floatの詳細については。

ありがとうございました、

于 2013-01-14T08:46:57.963 に答える
0

DIV はブロック要素です。floatこれは、 、position:absolute;、またはを使用しない場合、2 つの DIV が上下に表示されることを意味しますinline。

于 2013-01-14T08:28:34.030 に答える
0

「フロート」スタイルを使用する場合、この div は「インライン」の場合は外部に、「ブロック」の場合は内部に存在し、要素の背面に影響します。したがって、コンテンツを右に表示する場合は、「float:left;width:80%」と​​「float:left;width:80%」を使用できます。実際、これは「display:inline-block」ですが、私の経験によると、ブラウザのバグが発生します。

于 2013-01-14T08:33:13.440 に答える