Question

我的HTML代码看起来有点像这样，并且由于某种原因它会保持不对齐或插入无法控制的间隙。

<section id="boxes">

<div id="boxes1">
<ul>
<li>Justs the Facts</li>            
</ul>
</div>

<div id="boxes2">
<ul>
<li>Visit Neptune</li>
</ul>
</div>

</section>

相关的CSS在这里：

#boxes {
  width:700px;
  background-color: #ffffff
}
#boxes1 {
  width: 350px;
  float: left;
}
#boxes2 {
  width: 350px;
  float: right;
}

这会创建两个块之间的差距。如何创建它以便boxes1与boxes2的div部分之间没有余量或差距？

Answer 1

将这个用于两个方框。

.boxes {
  width: 50%;
  float: left;
}

Answer 2

这是因为您将div元素向相反的方向浮动。

#boxes1 {
  width: 350px;
  float: left;
}
#boxes2 {
  width: 350px;
  float: right;
}

将它们两个浮在左边。

#boxes1, #boxes2 {
  width: 350px;
  float: left;
}

Answer 3

因为你是一个向右浮动的人。这使div对齐包含div或正文的右侧。

你应该在两者上使用float：left。

像这样：

#boxes{
 width:700px;
 background-color: #ffffff
  }
#boxes1{
 width: 350px;
 float: left; }
#boxes2 {
width: 350px;
float: left;
}

Answer 4

你必须将两个方框向右或向左浮动。

#boxes1{
width: 350px;
float: left; /*or right*/ }
#boxes2 {
width: 350px;
float: left; /*or right*/ 
}

Answer 5

这应该是必要的。

#boxes{
 width:700px;
 background-color: #ffffff
  }
#boxes1{
 width: 350px;
 float: left; 
 }
#boxes2 {
width: 350px;
float: left;

}

您可以在此处查看：

http://jsfiddle.net/wBjZw/

Answer 6

#boxes1{
width: 50%;
float: left;
#boxes2 {
width: 50%;
float: left; 
}

试试这个......

Answer 7

使用此功能。

#boxes ul {
    margin:0;
    padding:0;
}

如何消除这两个div部分之间的差距？

7 个答案: