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 时，它也会与菜单 div 一起浮动，因此占据所有空间。

请参考本站

有关float的更多信息。

谢谢，

于 2013-01-14T08:46:57.963 回答
0

DIV 是块元素。float这意味着如果不使用、position:absolute;或，则 2 个 DIV 将依次显示在另一个下方inline。

于 2013-01-14T08:28:34.030 回答
0

如果你使用'float' 样式表示这个div 在'inline' 的外部呈现并且在'block' 的内部呈现，并且会影响元素的背面。因此，如果内容正确显示，您可以使用“float:left;width:80%”和“float:left;width:80%”。其实这是'display:inline-block'，但根据我的经验，它会产生浏览器的bug。

于 2013-01-14T08:33:13.440 回答