zoukankan      html  css  js  c++  java
  • 怎样让浮动的子DIV自动撑大外边的父级DIV

    一般我们需要一个浮动的子DIV不跑出父级DIV时,都会想到给父级的DIV一个固定的高宽,但这样做的前提是必须知道子DIV的高宽和个数,这样才好计算出父级DIV的高宽来。但是在一些情况下,我们根本无法知道子DIV的个数,这时就会出现子DIV跑到父级DIV的外边去了。如图:


    看到没有,上图中下边两个DIV就跑了出来,这位非常影响页面布局。那么可不可以给父级DIV不指定高度或者CSS定义为自动呢?好,现在我们就设置一下看看。下面是我分别设置后的结果:

    不难看出,父级DIV根本就缩成一条线在顶上,4个子DIV跳出出了。所以这个方法也行不通。那么要如何定义CSS才能解决这个问题呢?这时我想到了overflow(溢位),我们来试试,先换成visible(可见),这时还是跟上图一样,再用scroll(滚动),就出现了下面的样子:

    可是可以,但不是我们想要的结果,并且还多了个滚动条。再换成auto(自动)和hidden(隐藏),这时符合我们的需要,如图:

    但就倒底该用哪个呢?,我推荐使用overflow:hidden(溢位:隐藏)。为什么呢?原因是在没有定义父DIV的高度时,两个看不出什么差别来,一旦定义了,当父级DIV的高度小级DIV总和的高度时,使用overflow: auto(溢位:自动)就会出现滚动条,排列不规则;但是使用overflow:hidden(溢位:隐藏)就不会出现这样的情况,子DIV超出后它会自动给隐藏掉,这样看起来也显得很规则。所以在没有定义父级DIV高度的情况下,我还是建议用overflow:hidden(溢位:隐藏)

  • 相关阅读:
    百度之星 预赛002 大数问题+斐波那契数列
    L2-005. 集合相似度
    L2-008. 最长对称子串 (有个知识点没看)
    L1-1. 这是一道简单题
    L1-3. 这道真是简单题
    java实现的加密解密
    应用实现国际化的做法
    SAX解析器
    JFrame绝对布局
    配置Tomcat启用Https安全协议的访问
  • 原文地址:https://www.cnblogs.com/jiunie/p/8009524.html
Copyright © 2011-2022 走看看