zoukankan      html  css  js  c++  java
  • div不设置高度背景颜色或外边框不能显示的解决方法

    在使用div+css进行网页布局时,如果外部div有背景颜色或者边框,而不设置其高度,在浏览时出现最外层Div的背景颜色和边框不起作用的问题。

    大体结构
    <div class="outer">
      <div class="inner1"></div>
      <div class="inner2"></div>
    </div>
    css文件:(只写出了最主要的部分css代码:定义了最外层div的背景颜色和边框,同时定义了里面的div是浮动的)
    .outer{border:#F00 1px solid; background:#FF9 repeat;}
    .inner1,.inner2{float:left;}

    所以出现这种问题有两个前提:1.外部div没有设置高度;2. 内部div是浮动的(带有float属性)。

    解决方法:
    给外部div直接设置高度(不推荐),因为很多时候我们并不知道外部div的高度,我们希望靠里面的div来根据内容自动抻开外边的div,除非你确定的知道外部的div的高度的情况下,所以不建议使用这种方法。
    方法一:
    在内部每个div后加一个清除浮动(推荐),这样firefox和opera就把里面不当成浮动,会自动计算内部div高度
    <div class="outer">
      <div class="inner1"></div>
      <div class="inner2"></div>
      <div style="clear:both;"></div>
    </div>
    方法二:
    在.outer中加一句overflow:hidden;(这种方法我不是特别理解,但是经过试验,也是可以解决这个问题的)
    overflow 属性规定当内容溢出元素框时发生的事情。如果外层设置了高度,并且高度小于内层占的实际高度,则内层一部分内容会被隐藏。

  • 相关阅读:
    零基础学习Java Web开发(一)
    域名的定义
    MyEclipse使用(一)
    VB与C#语言部分不用的地方Part1
    使用XmlWriter创建XML文件
    Spring源码
    Websocket原理
    阿里云
    CSS中position属性( absolute | relative | static | fixed )详解
    C#UDP广域网,局域网通信-原理分析
  • 原文地址:https://www.cnblogs.com/web-chuanfa/p/10497262.html
Copyright © 2011-2022 走看看