Question

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

我还没到那儿。这是我在的地方： http://labs.pieterdedecker.be/test/test.htm

我很擅长使用<div> s（而非<table> s）来创建页面的布局。我如何完成工作？

Answer 1

尝试包括明确：两者都在身体div。

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

祝你好运！ ; - ）

Answer 2

您只需添加2个CSS样式规则即可修复菜单：

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

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

Answer 3

只需添加以下代码：

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

行后：

<div id="body">

那是：

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

有关 clear 属性的详细信息。

另外，看看好的教程：

Answer 4

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

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

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