需要帮助创建带有 DIV 的布局答案

【问题标题】：Need help creating a layout with DIVs需要帮助创建带有 DIV 的布局
【发布时间】：2010-04-17 10:08:03
【问题描述】：

这就是我希望我的页面看起来的样子：

我还没到那一步。这是我所在的位置： http://labs.pieterdedecker.be/test/test.htm

我对使用<div>s（而不是<table>s）来创建我的页面布局非常陌生。如何完成工作？

【问题讨论】：

【解决方案1】：

您可以通过添加 2 个 CSS 样式规则来修复菜单：

.menu { overflow: hidden; }
.menu ul { margin: 0; }

由于浏览器默认的<ul>边距，溢出会留下一个更高的菜单，只需用第二种样式清理它，这将消除边距。

【讨论】：

菜单栏背景现在横跨页面容器。谢谢！但是为什么将溢出设置为隐藏会导致 DIV 被拉伸？我只在文本不完全适合元素时必须切断文本的上下文中使用溢出。
@Pieter - 这是一种替代方式，而不是清除元素。它强制“溢出”元素在其高度计算中容纳浮动子元素。如果您想了解更多信息，请在此处完整阅读：quirksmode.org/css/clearing.html

【解决方案2】：

尝试在 body div 中包含 clear:both。

  <div id="body" style="clear: both">
    <p>This is my body</p>
  </div>

祝你好运！ ;-)

【讨论】：

【解决方案3】：

只需添加以下代码：

 <div style="clear:both; margin-left:20px;">

行后：

<div id="body">

即：

<div id="body">
<div style="clear:both;">

关于 clear 属性的更多信息。

另外，看看好的教程：

【讨论】：

【解决方案4】：

我现在看到的问题是您的蓝色“项目”框看起来不正确。我认为原因是包含“项目”框的 div 应该包含在主“主体”框中。它实际上是“body”div 中的第一件事。

为了让自己更轻松，您应该在“body”div 中创建一个 div，使用 width: 100% 和 background: blue（或任何颜色）。然后，在该 div 中，您可以创建项目列表。

将“项目”放在“项目栏”中的明显方法是将float:left所有项目放在自己的div中。然后，您需要为“项目栏”本身设置一个静态高度（如 height: 2em），因为仅包含浮动元素的 div 没有高度。

【讨论】：