Html CSS-Div不会与另一个Div分开

我是CSS新手，也许你会嘲笑我的问题

我有两个主要的div（“topinfo”和“navigate”），我需要它们分开，一个接一个，但由于某些原因它们没有

在Fiddle上运行代码：

以下是HTML代码：

<div id="topinfo">
  <div id="infowin">
    <div id="computer">
      <b>Computer:</b> 123456789012345 (192.168.560.000)
      <img src="http://i.imgur.com/Y1CJmSa.png" id="more"/>
    </div>
  </div>
  <div id="statbtn">
    <a href="stats.htm" target="_blank">
      <img src="http://i.imgur.com/rh4XEOQ.png" id="bstats">
    </a>
  </div>
</div>

<div class="navigat">
  <a href="" class="navbtn">&laquo; First</a>
  <a href="" class="navbtn">&laquo; Prior</a>
  <select class="navsel" onchange="self.location.href=options[selectedIndex].value">
    <option selected="selected">Page 001</option>
    <option value="pag002.htm">Page 002</option>
    <option value="pag003.htm">Page 003</option>
    <option value="pag004.htm">Page 004</option>
    <option value="pag005.htm">Page 005</option>
  </select>
  <a href="" class="navbtn">Next &raquo;</a>
  <a href="" class="navbtn">Last &raquo;</a>
</div>

以下是我得到的：

以下是我真正需要的：

---

谢谢你的帮助

之所以发生这种情况，是因为您正在使用

浮动来对齐
#topinfo
的
div

您可以做的是使内部显示为
显示：inline块
。所以这会是这样的

#topinfo #infowin {
  display:inline-block
  width: 380px;
  border: 1px dotted #292929;
  border-radius: 4px;
  background-color: #FFFFE8;
}

#topinfo #statbtn {
  display:inline-block;
  width:32px;
  height:32px;
  border: 0;
  vertical-align: bottom;
}

如果要使用浮动，可以在
.navigate
类上使用
清除：两个
。
到达
.navigate
时，需要清除上面的浮动，然后添加一点填充以获得所需的间距

.navigat {
  clear: both;
  padding-top: 18px;
}

推荐阅读：Chris Coyier，
这是因为您的浮动，您可以通过在
“topinfo”
和
“navigate
”之间添加一个
空div
来解决此问题

HTML:

<div id="topinfo">
  <div id="infowin">
    <div id="computer">
      <b>Computer:</b> 123456789012345 (192.168.560.000)
      <img src="http://i.imgur.com/Y1CJmSa.png" id="more"/>
    </div>
  </div>
  <div id="statbtn">
    <a href="stats.htm" target="_blank">
      <img src="http://i.imgur.com/rh4XEOQ.png" id="bstats">
    </a>
  </div>
</div>
<div class="clear"></div>
<div class="navigat">
  <a href="" class="navbtn">&laquo; First</a>
  <a href="" class="navbtn">&laquo; Prior</a>
  <select class="navsel" onchange="self.location.href=options[selectedIndex].value">
    <option selected="selected">Page 001</option>
    <option value="pag002.htm">Page 002</option>
    <option value="pag003.htm">Page 003</option>
    <option value="pag004.htm">Page 004</option>
    <option value="pag005.htm">Page 005</option>
  </select>
  <a href="" class="navbtn">Next &raquo;</a>
  <a href="" class="navbtn">Last &raquo;</a>
</div>

.clear
{
clear:both;
}

好的，开始吧！非常感谢。
.clear
{
clear:both;
}