Question

我是一个CSS新手，也许你笑我的问题......

我有两个主要的DIV（“topinfo”和“navigat”），我需要它们一个接一个地保持分离，但由于某种原因它们没有。

在小提琴上运行代码：https://jsfiddle.net/7mgfrhq6/

以下是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>

这是CSS代码：

#topinfo {
  width: 420px;
  margin: 16px auto 4px auto;
}
#topinfo #infowin {
  float: left;
  width: 380px;
  border: 1px dotted #292929;
  border-radius: 4px;
  background-color: #FFFFE8;
}
#topinfo #infowin #computer {
  padding: 6px;
  font-family: Verdana, Tahoma, Helvetica;
  font-size: 10pt;
  text-align: center;
}
#topinfo #statbtn {
  float: right;
  width:32px;
  height:32px;
  border: 0;
}

.navigat {
  width: 600px;
  margin: 18px auto 14px auto;
  font-family: Tahoma, Verdana, Helvetica;
  text-align: center;
}
.navigat a.navbtn {
  display: inline-block;
  width:70px;
  padding: 3px 3px 4px 3px;
  margin: 3px;
  font-size: 9pt;
  color: #FFFFFF;
  text-align: center;
  text-decoration: none;
  background-color: #1D63C8;
  border-radius: 10px;
  cursor: pointer;
}
.navigat select.navsel {
  display: inline-block;
  width:100px;
  padding:3px;
  margin: 3px;
  font-size: 9pt;
  line-height: 1;
  cursor: pointer;
}

这是我得到的：

这就是我真正需要的：

感谢您的帮助！

Answer 1

当你到达.navigat时需要清除上面的花车，然后添加一些填充以获得所需的间距。

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

推荐阅读：Chris Coyier，All About Floats

Answer 2

这种情况正在发生，因为您使用floats来对齐div的{{1}}。

你可以做的是将内部设为#topinfo。所以这将是这样的......

display:inline-block

如果您想使用花车，可以在#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; }课程上使用clear:both。

Answer 3

这是因为您的浮动，您可以通过在empty div和"topinfo"之间添加"navigat与clear:both来解决此问题

<强> 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>

<强> CSS：

.clear
{
clear:both;
}

<强> DEMO

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

3 个答案: