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

方法一:

父元素设置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. shell脚本变量

    既然是变量,自然分变量名和变量值,在使用的时候一定要注意哪些地方需要用变量名,哪些地方需要用变量的值. 自定义变量 shell变量不需要声明,随用随定义,给变量赋值的时候要注意 shell是空格敏感的 ...

  2. x01.os.16: 添加功能

    准备工作  1.确保是 win xp,如是 win 8,运行 nasm 需按提示同意安装组件.  2.确保 src 和 z_tools 在同一目录下,nasm 已包含在 z_tools 文件夹中.  ...

  3. spring 注入一个以枚举类型对象

    1.枚举 在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素组成了四季的 ...

  4. HttpURLConnection用法详解

    针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验 ...

  5. BeJavaGod - 如何正确使用数据字典进行分类统一操作(一)

    先说说什么是数据字典,这个玩意一般不太会解释,举个栗子吧~ 每个系统都会有用户表,性别:男(1)女(0) 另外我们做物流的会涉及到车型:卡车(1),轿车(2),挂车(3) 货物类型:危险品(1),普通 ...

  6. POJ3321Apple Tree[树转序列 BIT]

    Apple Tree Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 26995   Accepted: 8007 Descr ...

  7. instanceof

    java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例. instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. result ...

  8. NVIDIA显卡设置

    在玩3D游戏时,因为我的显卡不是特别给力,所以针对性能做出牺牲质量换取性能的调整. 简单设置 简单的方法是,3D设置-通过预览调整图像设置,根据偏重点来设置平衡:性能或者质量. 高级设置 如果你想自行 ...

  9. Linux设备驱动之中断支持及中断分层

    快速中断:在开启快速中断时,其他中断不会打断快速中断. 多个中断共享一个中断号. 中断行为受到限制: 1.不能使用可能引起阻塞的函数 2.不能使用可能引起调度的函数 中断注册:request_irq( ...

  10. 协议的分用以及wireshark对协议的识别

    在TCP/IP详解一书中谈到了协议的分用,书中的图1-8如上.图1-8可以很好地解释在互联网的分层结构中,底层的协议头是如何承载上层的不同的协议的.对于链路层而言,以太网首部中有不同帧类型用于表示以太 ...