Question

我是业余网络开发人员，我正在尝试设计一个非常基本的基于div的网页布局;我无法弄清楚为什么div不能正确显示。我有以下css：

body {
   width: 1000px;
   margin: 0px auto;
}

/*Div all the way at the top */
#header {
    background-color: #0CF;
    height: 130px;
    position:relative;
}

/*Inner div contained by the header */
#sitemenu {
    height: 30px;
    bottom: 0px;
    background-color: #C9C;
    position:absolute;
    width:100%;
}

/*Div appearing directly below the header */
#scheduleContainer {
    background-color: #FF9;
    height: 600px;
    width:100%;
    float:left;
    position:relative;
}

/*Div contained by "scheduleContainer", aligned left */
#schedule {
    background-color: #6C6;
    float: left;
    width:80%;
    height:100%;
}

/*Div contained by "scheduleContainer", aligned right */
#scheduleInfo {
    background-color: #F69;
    float: right;
    width:20%;
    height:100%;
}

/*Appears directly below schedule container */
#content {
    background-color: #09F;
    height:200px;
    position:relative;
}

以下HTML在我认为相当直接的方式中使用了这些样式：

<body>
<div id="header">
  <div id="sitemenu">Content for  sitemenu</div>

</div>
<div id="scheduleContainer">
  <div id="schedule">Content for  schedule Goes Here</div>
  <div id="scheduleInfo">Content for  id scheduleInfo Goes Here</div>
</div>

<div id="content">Content for  content</div>

</body>

div的颜色只是帮助我可视化布局，而id名称并不是真正意义上的任何东西。我只是想知道为什么，在我的浏览器上，＆＃34;内容＆＃34; div出现在我想要的地方，但是作为其背景的蓝色区域直接出现在前面的div之上，就好像内容div的代码在div之内（它不是，它直接来自该div的结束标记）。我想要的是让header，scheduleContainer和内容div按照它们在代码中编写的顺序出现。随意批评我的决定或一起推荐不同的方法。我非常业余，只想学习。

Answer 1

这是因为你上面的div是浮动的。一种常见的方法是你可以在浮点数和你的内容div之间添加clear:both，如下所示：

JSFiddle

  ....
  <div id="scheduleInfo">Content for  id scheduleInfo Goes Here</div>
</div>
<div style="clear:both"></div>
<div id="content">Content for  content</div>

More information on clearing floats

浮动布局的一个常见问题是浮动' 容器不想伸展以容纳花车。

Answer 2

从scheduleContainer中删除浮动。

#scheduleContainer {
    background-color: #FF9;
    height: 600px;
    width:100%;
    position:relative;
}

Answer 3

删除了一些不需要的位置：relative并清除了内容div

body {
   width: 1000px;
   margin: 0px auto;
}

/*Div all the way at the top */
#header {
    background-color: #0CF;
    height: 130px;
    position:relative;
}

/*Inner div contained by the header */
#sitemenu {
    height: 30px;
    bottom: 0px;
    background-color: #C9C;
    position:absolute;
    width:100%;
}

/*Div appearing directly below the header */
#scheduleContainer {
    background-color: #FF9;
    height: 600px;
    width:100%;
    float:left;
}

/*Div contained by "scheduleContainer", aligned left */
#schedule {
    background-color: #6C6;
    float: left;
    width:80%;
    height:100%;
}

/*Div contained by "scheduleContainer", aligned right */
#scheduleInfo {
    background-color: #F69;
    float: right;
    width:20%;
    height:100%;
}

/*Appears directly below schedule container */
#content {
    background-color: #09F;
    height:200px;
    clear:both
}

<body>
<div id="header">
  <div id="sitemenu">Content for  sitemenu</div>

</div>
<div id="scheduleContainer">
  <div id="schedule">Content for  schedule Goes Here</div>
  <div id="scheduleInfo">Content for  id scheduleInfo Goes Here</div>
</div>

<div id="content">Content for  content</div>

</body>

div中的文本出现在正确的位置，但其设计元素并不适用

3 个答案: