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

方法一:

父元素设置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. spring服务定位器类

    此文章是基于 搭建SpringMVC+Spring+Hibernate平台 功能:通过持有的Spring应用场景ApplicationContext,可在任何地方获取bean. 1. 服务定位器类:S ...

  2. linux中send函数MSG_NOSIGNAL异常消息

    最近2周在做ineedle的国舜项目扩展,需要使用socket的tcp连接向对方发送消息,当然需求很简单,只是按照对方要求发送指定格式的消息,程序结构也非常的简单,一对多的client/server模 ...

  3. stm32 加入 USE_STDPERIPH_DRIVER、STM32F10X_HD的原因

    初学STM32,在RealView MDK 环境中使用STM32固件库建立工程时,初学者可能会遇到编译不通过的问题.出现如下警告或错误提示: warning: #223-D: function &qu ...

  4. 连接到Windows Azure Point to Site VPN

    Windows Azure支持两种模式的VPN接入: Site to Site,接入端需要有固定的公网IP地址,用于连接局域网和Windows Azure的虚拟网络. Point to Site,客户 ...

  5. C#笔记---动态类(Dynamic)应用

    背景: 在Coding中有时候会遇到一些需要解析的数据,可是数据的字段数量和名称未统一,我们没法定义实体类来对应.那么我们就会想到通过C#的dynamic动态类来实现,如果大家注意的话一些ORM框架里 ...

  6. Machine Learning Algorithms Study Notes(3)--Learning Theory

    Machine Learning Algorithms Study Notes 高雪松 @雪松Cedro Microsoft MVP 本系列文章是Andrew Ng 在斯坦福的机器学习课程 CS 22 ...

  7. 一行代码远离Google浏览器兼容问题的困扰

    跟Html相比,Web Flash开发的最大优势就在于兼容性好,因为FlashPlayer的开发商只有Adobe一家.但自从Google插了一脚进来,改版出自己的FlashPlayer以后,这一优势就 ...

  8. MyBatis配置文件解析

    MyBatis配置文件解析(概要) 1.configuration:根元素 1.1 properties:定义配置外在化 1.2 settings:一些全局性的配置 1.3 typeAliases:为 ...

  9. java 28 - 1 设计模式 之 面向对象思想设计原则和模版设计模式概述

    在之前的java 23 中,了解过设计模式的单例模式和工厂模式.在这里,介绍下设计模式 面向对象思想设计原则 在实际的开发中,我们要想更深入的了解面向对象思想,就必须熟悉前人总结过的面向对象的思想的设 ...

  10. Mysql备份系列(1)--备份方案总结性梳理

    mysql数据库备份有多么重要已不需过多赘述了,废话不多说!以下总结了mysql数据库的几种备份方案: 一.binlog二进制日志通常作为备份的重要资源,所以再说备份方案之前先总结一下binlog日志 ...