zoukankan      html  css  js  c++  java
  • 关于内层DIV设置margin-top不起作用的解决方案

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

    <style>

    .aDiv {background:red; 300px; height:300px; }
    .bDiv {background:green; position:relative; 100px; height:20px; margin-top:10px;}
    .cDiv {background:black; position:relative; 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

  • 相关阅读:
    win10 系统下myeclipse 下启动 tomcat7 所遇到的问题
    搭建个人博客&论坛(LAMP):wordpress、discuz、phpMyAdmin
    拟合优度检验和独立性检验
    作业day19
    numpy
    正则模块
    模块功能
    模块
    匿名函数、异常处理
    递归和迭代器
  • 原文地址:https://www.cnblogs.com/bm20131123/p/4747023.html
Copyright © 2011-2022 走看看