zoukankan      html  css  js  c++  java
  • 子元素使用float 父元素撑开方法

    一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开,如下图:

    部分代码如下:

    复制代码
    1 <style>
    2   #div1{border:1px solid red;float:left;}
    3   #div2,#div3{float:right;border:1px solid blue;}
    4 </style>

    6 <div id="div1">
    7   <div id="div2">two</div>
    8   <div id="div3">one</div>
    9 </div>
    复制代码

    如果想要撑开父元素可以采用以下方法:

    方法一:

    父元素设置overflow以及zoom,样式如下:

    1 <style>
    2   #div1{border:1px solid red;overflow:hidden;zoom:1;}
    3   #div2,#div3{float:right;border:1px solid blue;}
    4 </style>

    方法二:

    父元素也是设置浮动效果,样式如下:

    1 <style>
    2   #div1{border:1px solid red;float:left;}
    3   #div2,#div3{float:right;border:1px solid blue;}
    4 </style>

    此方法有个缺陷是,父元素的宽度需要设置。

    方法三:

    在添加一个子元素,并设置clear样式:

    1 <div id="div1">
    2   <div id="div2">two</div>
    3   <div id="div3">one</div>
    4   <div style="clear:both"></div>
    5 </div>

    此方法添加了一个div元素,有些情况下可能这个div会影响元素的遍历。

    以上方法 使用doctype html 4.0 以及 doctype xhtml 1.0 的 Transitional 在FF IE6 IE7 IE8 下测试通过,其他浏览器没有测试。

  • 相关阅读:
    小程序 琐碎
    html + css 琐碎
    mysql 认识
    vue2.x.0 版本新增的 API
    AMD、CMD 和 CommonJS 的区别
    改变UIPageControl圆点间距
    android 内存回收
    ios点击改变uiview背景颜色
    objc_setAssociatedObject 使用
    Position Independent Code (PIC) in shared libraries【转载】
  • 原文地址:https://www.cnblogs.com/phoebewang00/p/5620713.html
Copyright © 2011-2022 走看看