1

我的 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;
}

这会产生类似两个块的东西，中间有一个间隙。我怎样才能创建它，以便在boxes1vs的 div 部分之间没有边距或间隙boxes2？

4

7 回答 7

2

两个盒子都用这个。

.boxes {
  width: 50%;
  float: left;
}
于 2013-09-18T13:37:28.533 回答
0

您必须将两个框浮动到相同的方向，向右或向左。

#boxes1{
width: 350px;
float: left; /*or right*/ }
#boxes2 {
width: 350px;
float: left; /*or right*/ 
}
于 2013-09-18T13:39:26.790 回答
0 
#boxes1{
width: 50%;
float: left;
#boxes2 {
width: 50%;
float: left; 
}

尝试这个...

于 2013-09-18T14:08:25.233 回答
0

用这个。

#boxes ul {
    margin:0;
    padding:0;
}
于 2013-09-19T11:39:40.007 回答
0

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

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

将它们都浮动到左侧。

#boxes1, #boxes2 {
  width: 350px;
  float: left;
}
于 2013-09-18T13:35:20.563 回答
0

这应该做必要的。

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

}

你可以在这里查看：

http://jsfiddle.net/wBjZw/

于 2013-09-18T13:41:31.857 回答
0

因为你在右边浮动一个。这使得 div 与包含 div 或主体的右侧对齐。

您应该在两者上都使用 float:left 。

像这样：

#boxes{
 width:700px;
 background-color: #ffffff
  }
#boxes1{
 width: 350px;
 float: left; }
#boxes2 {
width: 350px;
float: left;
}
于 2013-09-18T13:36:39.907 回答