css - float div 无法正确 float

Question

这是我在这里的第一篇文章，因为我无能为力所以我想我会跳进去并最终寻求一些帮助!

我正在设计的网站上有一个“联系我们”部分，其中包含一个关于我们的小段落、电子邮件和电话。旁边是我从 php form builder 获得的电子邮件联系表。一切都进行得很顺利，直到我把那个坏男孩放进去。

谁是我的联系我们“包装器”代码:

#contact {
 background-image:url(img/contact_bg.jpg);
 background-repeat: no-repeat;
 width: 820px;
 height: 459px;
 margin: 25px 70px 50px 70px;
 clear: both;
 }

#thanks {
 width: 324px;
 height: 100px;
 padding-top: 35px;
 }

#thanks span {
  font-size: 1.5em;
  font-weight: normal;
  font-style: italic;
  letter-spacing:1px;
  color: #ffffff;
  text-shadow: 1px 1px 1px #000000;
  text-decoration: none;
  padding: 0 0 0 25px;
 }

#details {
 width: 324px;
 height: 63px;
 padding-top: 25px;
 clear: both;
  }

#details span {
 font-size: 1.115em;
 font-weight: normal;
 font-style: italic;
 letter-spacing:1px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 text-decoration: none;
 padding: 0 0 0 25px;
 clear: both;
 }

#about {
 width: 324px;
 clear: both;
 }

#about h2 {
 font-size: 1.618em;
 font-weight: normal;
 letter-spacing:1px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 padding-left: 25px;
 text-decoration: none;
 clear: both;
 }

#about span {
 font-size: 1em;
 font-weight: normal;
 letter-spacing:1px;
 color: #ffffff;
 text-shadow: 1px 1px 1px #000000;
 line-height: 14px;
 text-decoration: none;
 padding: 10px 0 0 25px;
 clear: both;
 }

这是我的表单 CSS:

  #form {
   margin:0 auto;
   text-align:left;
   width:391px;
   height: 459px;
   float: right;
   }

  form.appnitro {
   margin:20px 20px 0;
   padding:0 0 20px;
   }

下面是一些截图:

它应该是这样的:这就是它现在的样子:(

非常感谢任何帮助，如果您需要更多信息，请告诉我。

非常感谢!

Answer 1

您的 #thanks 和您的 #about 都是 float 的，所以您的联系表虽然是 float 的，但出现在它们下面。您需要同时 float #thanks 和 #about float:left。

您还有很多 clear:both 会重置文档流，这可能会导致您遇到的一些问题。不过，如果没有看到实际的 HTML 就很难说。