2回答

• 

  dean317317

  2017-03-03 16:11:54

  已采纳

  我在网上看到的。。。

  常常可以碰到这样一个问题，就是外层DIV设置了高与宽，内层DIV如果设置maring-top不起作用（FIREFOX和IE8中测试），原因大致是内层div没有获得布局。如下面的代码：

  <style>

  .aDiv {background:red; width:300px; height:300px; }
  .bDiv {background:green; position:relative; width:100px; height:20px; margin-top:10px;}
  .cDiv {background:black; position:relative; width:100px; height:20px;}
  </style>

  <div class="aDiv">
  <div class="bDiv"></div>
  <div class="cDiv"></div>
  </div>

  测试发现，bDiv的margin-top不起作用，仍是0px的显示效果。如果在firefox中用firebug查看，可以看到margin-top是有值的，为10px;解决问题如下：

  1、把margin-top改成padding-top,不过,前提是内层的Div没有设置边框
  2、给外层的Div加padding-top
  3、给外层DIV加：

  A、float: left或right

  B、position: absolute

  C、display: inline-block或table-cell或其他 table 类型

  D、overflow: hidden或auto

  
  

  1 0

  慕勒6241...

  非常感谢！

  2017-03-04 21:09:55

  共 1 条回复 >

• 

  慕粉232415367

  2017-02-22 02:27:37

  我想大概是没有清除浮动影响吧
  

  /* 清除浮动影响 */
  .clearfix:after {
      content: ".";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
  }
  .clearfix {
      *zoom: 1; /* HACK_IE_LTE_7: IE7及更老版本的IE不支持:after伪元素 */
  }

          <div class="nav clearfix">
             <div class="nav_left">滚动新闻</div>
             <div class="nav_right">这是滚动新闻</div>
          </div><!--nav结束-->

  0 0