为什么ID表单的DIV会下降到相邻DIV的下方?

为什么ID表单的DIV会下降到相邻DIV的下方?

好听的两个字的网名 发布于 2021-10-20 字数 2236 浏览 884 回复 2 原文

我无法在布局中正确定位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>

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

剑心龙吟 2021-10-20 2 楼

因为您有两个块(平面布置图和开发信息),每个块都有一个边框,所以它们现在太宽了,无法放在表单块旁边。测试方法是删除一个或两个边框,然后查看表单是否会弹出。
请注意,IE6中经常出现负边际问题,请确保并检查任何解决方案。

终陌 2021-10-20 1 楼

表单 div 的顶部与它前面的 div 的顶部对齐。 clear:left; 上的 #projects#projects 与以下内容一起移动到下一行(好)(坏)。尝试一个否定的顶边,或者考虑重构你的HTML,在 #form 之前放 #projects
添加以下内容应该有效:

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