zoukankan      html  css  js  c++  java
  • DIV撑开

    引用自:http://radzhang.iteye.com/blog/1678734

    在CSS排版中,如果一个层中的层使用了float浮动的话,那么就有可能会出现外层没有被内层撑开的情况,如以下代码所示:

    1. <div style="300px; "
    2.     测试  
    3.     <div style="100px; height:100px;  float:left; margin:10px;"
    4.         左边  
    5.     </div
    6. </div

         如果要解决这个问题,可以在外层的CSS中加上“overflow:auto”。

        在CSS中overflow属于用来说明当内容溢出元素框时要怎么处理,从上图中可以看出,内层已经溢出了外层,所以需要使用overflow属性来指如何显示内层中。overflow属性的默认值是visible,也就是不管它是怎么溢出的,溢出的内容不裁剪,任其显示在元素框外面。

        除了visible值之后,overflow属性还有以下几个值:

    • hidden:内容会被裁剪,溢出的部分看不到。
    • scroll:使用滚动条来查看溢出的部分,始终显示滚动条。
    • auto:如果内容需要裁剪,则等于scroll,显示滚动条;否则不显示滚动条。
    • inherit:从父元素中继承overflow属性值。不过以前的IE版本都不支持该属性值,包括IE8,IE9还没试过。

        由于本例中,外层的CSS没有指定overflow属性,所以默认为visible,也就是不管它怎么个溢出法,所以,只要将外层的CSS中加上overflow:auto,如以下代码所示:

    1. <div style="300px;  overflow:auto;"
    2.     外层  
    3.     <div style="100px; height:100px;  float:left; margin:10px;"
    4.         内层  
    5.     </div
    6. </div

        也许有人会说,为什么设置overflow:auto之后,外层就包含了内层,而不是将溢出的那部分使用滚动条显示出来呢?这是因为没有指定外层的高度,所以它就自适应了。如果指定了外层的高度,而内层的高度又大于外层的高度,那么就会显示滚动条了。如以下代码所示。

    1. <div style="300px;  overflow:auto; height:80px;"
    2.     外层  
    3.     <div style="100px; height:100px;  float:left; margin:10px;"
    4.         内层  
    5.     </div
    6. </div

    注:div内的控件如果设置了position:absolute 那么div将不被自动撑开,必须设置为relative;如果的确需要absolute,那么只有固定设置div的高度

  • 相关阅读:
    appium 启动失败解决方案
    appium for windows 环境搭建
    HttpClient 4 使用方法的几个例子(代理,StringEntity字符串数据,文件上传)(转载)
    下拉框和单选框复选框的选中的值
    js刷新父页面的方法
    克隆虚拟机ip修改后没改变的原因
    二进制转换与此平台,VMware Workstation不,Workstation 不可恢复,此虚拟环境中的长模式
    在虚拟机(VMware)中安装Linux CentOS 6.4系统(图解) 转
    sql语句常用的函数总结
    java.lang.OutOfMemoryError: Java heap space 。java heap space明确的指出了异常发生的区域,
  • 原文地址:https://www.cnblogs.com/oisiv/p/4599723.html
Copyright © 2011-2022 走看看