Question

我的页面设置如下：

HTML：

<div id="wrapper">
  <div id="right">
    ...
  </div>

  <div id="left">
    <div id="top">...</div>
    <div id="bottom">...</div>
  </div>
</div>

CSS：

#wrapper {
  margin: 0 auto;
  width: 400px;
}

#wrapper #right {
  position: relative;
  float: left;
  width: 400px;
  border: 1px solid black;
}

#wrapper #left {
  position: fixed;
  float: left;
  width: 200px
  top: 150px;
  margin-left: -230px;
  border: 1px solid black;
}

#wrapper #left #top {
  float: left;
  border: 1px solid black;
  margin-bottom: 20px;
}

#wrapper #left #bottom {
  float: left;
  border: 1px solid black;
}

由于某种原因，左边div中的底部div没有显示出来。关于它为什么没有出现的任何解释？有解决方案吗？提前谢谢！

Answer 1

它正在显示。查看http://codepen.io/anon/pen/pzqoi

#wrapper {background:#f4f4f4; height:960px;}
#right{background:#f4f4f4; border:1px solid #ccc; float:right;}

#left {background:#f4f4f4; border:1px solid #ccc; float:left; padding:10px;}
#top {background:#f4f4f4; border:1px solid #ccc;margin-bottom:5px;}
#bottom {background:#f4f4f4; border:1px solid #ccc; clear:both;}

Answer 2

当您使用float:left;时，<div>不占用空间，因此底部<div>位于顶部div后面。要解决此问题，请从顶部float:left;取出<div>。

第二个div在另一个里面没出现？

2 个答案: