一个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>
5 
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 下测试通过,其他浏览器没有测试。

子元素使用float 父元素撑开方法的更多相关文章

  1. 子div用了float浮动之后,如何撑开父元素,让父元素div自动适应高度的问题

    方法一: html: <div id="all1"> <div id="left1">1</div> <div id= ...

  2. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  3. JS子元素oumouseover触发父元素onmouseout

    原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...

  4. ie6下子元素撑大父元素

    今天遇到了一个问题.在给a元素定义hover并且增大尺寸时,IE6下该元素会把父元素撑大,而非IE浏览器则是表现为溢出效果不会撑大父元素(我想要的效果).解决IE6的这个问题是采用了一个定位+负边距的 ...

  5. 子Div使用Float后如何撑开父Div

    如果想要撑开父元素可以采用以下方法: 方法一: 父元素设置overflow以及zoom,样式如下: 1 <style> 2   #div1{border:1px solid red;ove ...

  6. margin折叠-从子元素margin-top影响父元素引出的问题

    正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...

  7. CSS子元素margin-top对于父元素的影响

    父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码如下 <styl ...

  8. 【转】C# 子窗体如何调用父窗体的方法

    网络上有几种方法,先总结如下: 调用窗体(父):FormFather,被调用窗体(子):FormSub. 方法1: 所有权法       //FormFather:        //需要有一个公共的 ...

  9. CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...

随机推荐

  1. nodejs中使用http请求返回值为html时乱码问题

    今天用nodejs进行http请求时返回的数据是一个html文件,然后我还是按照以前解析json数据的方法.果不其然报错了:SyntaxError: Unexpected token  in JSON ...

  2. 李洪强经典面试题145-Runloop

    李洪强经典面试题145-Runloop   Runloop 什么是 Runloop? 从字面上讲就是运行循环. 它内部就是do-while循环,在这个循环内部不断地处理各种任务. 一个线程对应一个Ru ...

  3. email

    #region 邮件帮助类 //+-------------------------------------------------------------------+ //+ FileName: ...

  4. 使用javax.persistence注解配置PO对象

    JPA注解持久化类很方便,需要jar包:ejb3-persistence.jar下载 import java.io.Serializable; import javax.persistence.Col ...

  5. CentOS上使用sysstat做系统监控测试

    先安装sysstat yum -y install systat 然后,再改一下任务计划 [root@localhost sa]# cat /etc/cron.d/sysstat # Run syst ...

  6. winfrom的两种拖拽方式和界面阴影

    方式1private Point mouseOffset; //记录鼠标指针的坐标 private bool isMouseDown = false; //记录鼠标按键是否按下 private voi ...

  7. eclipse里面设置JVM参数的问题

    在run----run configuration---Agruments里面设置JVM的参数:  -Xms256m   -Xmx1024m 肯定还有别的方式设置,今天就先写这一种方法.待续...

  8. atitit.自适应设计悬浮图片的大小and 位置

    atitit.自适应设计悬浮图片的大小and 位置 #--------最好使用relate定位.. 中间,图片的大小和位置走能相对table, 没有遮罩左的或者哈面儿文本的问题,要悬浮,使用top:- ...

  9. oracle中的数值函数整理

    主要分为三块介绍(单值函数.聚合函数.列表函数) 一.单值函数(比较简单,看一遍基本也就理解记住了) 1.基本加减乘车没有什么可说的,只需要注意一点,任何值与null一起运算 ,结果都为null,因为 ...

  10. .net分页控件webdiyer:AspNetPager

    首先下载:AspNetPager.dll   AspNetPager.xml  放到bin目录下 页面添加<%@ Register Assembly="AspNetPager" ...