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(溢位:隐藏)

  • 相关阅读:
    Unity3d限制帧数
    Linux 后台运行程序
    Flask异步发送邮件的方法
    [转]视图多表
    dede 织梦手机静态化一键生成插件
    如何在wordpress中设置关键词和描述
    前端PS切图
    帝国cms用自定义列表页做首页
    帝国cms 滚动加载更多整合
    swiper 自定义pagination 样式内容
  • 原文地址:https://www.cnblogs.com/jiunie/p/8009524.html
Copyright © 2011-2022 走看看