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

方法一:

父元素设置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会影响元素的遍历。

子Div使用Float后如何撑开父Div的更多相关文章

  1. 子div设置float后会导致父div无法自动撑开

    本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...

  2. 子div设置float后导致父div无法自动撑开的问题

    子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...

  3. html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)

    浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...

  4. css 父div如何包裹带有float属性的子div,float子div如何撑开父div

    来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...

  5. 子元素绝对定位absolute后,自动撑开宽度

    position: absolute;   white-space: nowrap;

  6. Position a child div relative to parent container in CSS: [设置 子DIV位置 跟 父DIV相关联]

    最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-po ...

  7. 【html】【8】div布局[子div在父div居底]

    从今天起 开始细话div布局   思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...

  8. css中子元素浮动,无法自动撑开父元素的解决办法

    <div> <div style="float:left;">left</div> <div style="float:righ ...

  9. 父div高度和宽度的应用

    这是我自己在仿腾讯首页时遇到的布局问题,在此记录,如果有错,欢迎指正. 首先是对齐问题,可以把父div的高度设置为0,然后调整padding值,这样可以批量调整子div们和其他父div的相对高度. 这 ...

随机推荐

  1. MySQL数据库备份命令

    原文参考:MySQL数据库备份的命令 - 司南 mysqldump -hhostname -uusername -ppassword databasename > backupfile.sql备 ...

  2. 烂泥:Linux系统与windows系统文件同步

    本文由秀依林枫提供友情赞助,首发于烂泥行天下. 上篇文章中,我们介绍了有关Linux系统之间的文件同步,这篇文章我们来介绍下,有关Linux系统与windows系统,以及windows系统与windo ...

  3. 理解 OpenStack + Ceph (7): Ceph 的基本操作和常见故障排除方法

    本系列文章会深入研究 Ceph 以及 Ceph 和 OpenStack 的集成: (1)安装和部署 (2)Ceph RBD 接口和工具 (3)Ceph 物理和逻辑结构 (4)Ceph 的基础数据结构 ...

  4. [转]TextArea设置MaxLength属性最大输入值的js代码

    标准的DHTML文档中TEXTAREA的MAXLENGTH属性默认情况下不起作用,只有当事件发生时才起作用 如下:http://spiderscript.net/site/spiderscript/e ...

  5. Spring学习之第一个Spring MVC程序(IDEA开发环境)

    回顾Java平台上Web开发历程来看,从Servlet出现开始,到JSP繁盛一时,然后是Servlet+JSP时代,最后演化为现在Web开发框架盛行的时代.一般接触到一个新的Web框架,都会想问这个框 ...

  6. 【温故而知新-Javascript】使用canvas元素(第二部分)

    本文将继续介绍canvas的功能,展示如何绘制更复杂的图形(包括圆弧和曲线),如何使用剪裁区域来限制操作以及如何绘制文本.还是介绍可以应用在画布上的特效和变换,包括阴影.透明度.旋转和坐标重映射. 1 ...

  7. jsp前三章测试改错题

      (选择一项) A: B: C: D: 正确答案是 B ,B/S架构并不是C/S架构的替代品,有些程序例如大型的网络游戏一般使用的是C/S架构. (选择多项) A: B: C: D: 正确答案是 A ...

  8. 在Android中如何获取视频的第一帧图片并显示在一个ImageView中

    String path  = Environment.getExternalStorageDirectory().getPath(); MediaMetadataRetriever media = n ...

  9. MMDrawerController的使用

    1.http://www.jianshu.com/p/9e55cbf7d5ab  MMDrawerController的使用

  10. 一些重要的mel命令

    一些重要的mel命令 查询多边形顶点 xform -q -worldSpace -t "pCylinderShape1.vtx[0]" 设置顶点坐标 xform -objectSp ...