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

方法一:

父元素设置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. 烂泥:ubuntu下vsftpd虚拟用户配置

    本文由ilanniweb提供友情赞助,首发于烂泥行天下 想要获得更多的文章,可以关注我微信ilanniweb. 以前搭建vsftpd都是在centos下,本以为在ubuntu按照以前的步骤搭建即可.可 ...

  2. python异常

    Std 异常 异常名 描述 1 Exception 所有的异常 2 StopIteration 迭代器的next()方法不指向任何对象 3 SystemExit sys.exit() 函数执行 4 S ...

  3. 微信公众平台C# SDK:Senparc.Weixin.MP.dll

    https://github.com/Senparc/WeiXinMPSDK [转] http://www.cnblogs.com/szw/archive/2013/01/13/senparc-wei ...

  4. ARM学习篇 中断定时理解

    1. 中断控制器 a. 中断处理流程 P1--摘自S3C2440A手册 P1简要阐述了S3C2440A内置中断控制器处理中断的流程: ●​若某中断有自中断,则先接收子中断请求,否则,直接接受源中断. ...

  5. C#学习笔记-Windows窗体基本功能(Login登录界面)

    本菜鸟由于实习工作的原因,不得不快速接触C#语言,刚刚好又要做毕业设计,所以就通过自学的方式一举两得地完成这两件事情. 故此文字记录或代码中的各种文件名之类均是以毕业设计为模版记录的,看着不方便之处请 ...

  6. Flappy Bird (Java实现)

    运行效果: 代码: package bird; import java.awt.Graphics; import java.awt.Image; import java.awt.Toolkit; im ...

  7. 开启云时代,银狐H5游戏云通迅框架解决方案出炉!

    没有时间开发服务器? 不懂服务器开发? 还在为WEB SOCKET烦恼?还在为网络卡,负载承受能力小烦恼? 银狐H5游戏云通迅框架,集成通讯SDK和开放API,1天即可完成 它也是开放平台,提供游戏需 ...

  8. 嵌入式Linux驱动学习之路(五)u-boot启动流程分析

    这里说的u-boot启动流程,值得是从上电开机执行u-boot,到u-boot,到u-boot加载操作系统的过程.这一过程可以分为两个过程,各个阶段的功能如下. 第一阶段的功能: 硬件设备初始化. 加 ...

  9. 转: VMware 安装mac osx 10.11 安装步骤(一)(from伟东)

    http://blog.csdn.net/soachenshui/article/details/49251513

  10. Lambda表达式详解(转载)

    原文链接:http://www.cnblogs.com/knowledgesea/p/3163725.html lambda简介 lambda运算符:所有的lambda表达式都是用新的lambda运算 ...