Question

我无法在我的布局中正确定位div form。

通过查看我的div位置和下面的css，有没有人知道我可能做错了什么？

#floorplans {
  float: left;
  height: 165px;
  width: 203px;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  position: relative;
  background: #FFFFFF url(https://lorempixel.com/320/170/) no-repeat;
  padding-top: 14px;
  padding-left: 20px;
  display: block;
  color: #000000;
  line-height: 1.5em;
  padding-right: 10px;
}

#development {
  float: left;
  height: 165px;
  width: 204px;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  position: relative;
  background: #FFFFFF url(https://lorempixel.com/204/165/) no-repeat;
  padding-top: 14px;
  padding-left: 20px;
  display: block;
  color: #000000;
  line-height: 1.5em;
  padding-right: 10px;
}

#projects {
  background: #FFFFFF url(https://lorempixel.com/153/127/) no-repeat;
  height: 127px;
  width: 153px;
  text-align: left;
  padding-left: 300px;
  color: #333333;
  padding-top: 25px;
  display: block;
  float: left;
  position: relative;
  line-height: 1.5em;
  font-size: 10px;
  padding-right: 15px;
  clear: left;
}

#form {
  background: #990000 url(https://lorempixel.com/450/309/) no-repeat;
  float: left;
  height: 309px;
  width: 450px;
  position: relative;
  padding-top: 20px;
  padding-left: 30px;
  padding-right: 30px;
  color: #FFFFFF;
}

<div id="wrapper">
  <div id="logo"></div>
  <div id="topnav"></div>
  <div id="nav">
    <ul>
      <li><a href="#">link</a></li>
      <li><a href="#">link2</a></li>
      <li><a href="#">link3</a></li>
      <li id="last"><a href="#">link4</a></li>
    </ul>
  </div>
  <div id="gallery"></div>
  <div id="floorplans"></div>
  <div id="development"></div>
  <div id="projects"></div>
  <div id="form">
    <div>
    </div>

    <div id="footer"></div>
  </div>

您会注意到div form正在下降。我该怎么办才能让事情排好？我应该重新设计div的位置吗？

Answer 1

表单div的顶部与其前面的div顶部对齐。 clear:left;上的#projects将#projects移动到下一行（好），以及以下内容（错误）。尝试使用负的上边距，或考虑重新构建HTML以将#form放在#projects之前。

添加以下内容应该有效：

#form {
    margin-top:-180px;
}
#projects {
    border-right: 1px solid #FFFFFF;
}

Answer 2

因为你有两个块（FLOORPLANS和DEVELOPMENT INFO），每个块都有一个边框，它们现在太宽了，不能坐在表格块的旁边。通过删除一个或两个边框并查看表单是否会弹回那里来测试。

请注意，负余量通常在IE6中存在问题，请确保并针对该问题检查任何解决方案。

为什么ID表格的DIV会低于相邻的DIV？

2 个答案: