子Div使用Float后如何撑开父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会影响元素的遍历。
子Div使用Float后如何撑开父Div的更多相关文章
- 子div设置float后会导致父div无法自动撑开
本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 注: 文章部分转载 彩泉 - 博客园 原因:内部的DIV因为float:l ...
- 子div设置float后导致父div无法自动撑开的问题
子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...
- html中子div用了浮动怎样让父div的大小自动撑开(清除浮动)
浮动子div撑开父div的几种方法: (1)在父div中在添加一个清除浮动的子div<div style=" clear:both;"></div>,该di ...
- css 父div如何包裹带有float属性的子div,float子div如何撑开父div
来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
- 子元素绝对定位absolute后,自动撑开宽度
position: absolute; white-space: nowrap;
- 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 ...
- 【html】【8】div布局[子div在父div居底]
从今天起 开始细话div布局 思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: ab ...
- css中子元素浮动,无法自动撑开父元素的解决办法
<div> <div style="float:left;">left</div> <div style="float:righ ...
- 父div高度和宽度的应用
这是我自己在仿腾讯首页时遇到的布局问题,在此记录,如果有错,欢迎指正. 首先是对齐问题,可以把父div的高度设置为0,然后调整padding值,这样可以批量调整子div们和其他父div的相对高度. 这 ...
随机推荐
- InnoDB源码分析--事务日志(二)
原创文章,转载请标明原文链接:http://www.cnblogs.com/wingsless/p/5708992.html 昨天写了有关事务日志的一些基本点(http://www.cnblogs.c ...
- iOS解决隐藏导航栏后,打开照片选择器后导航栏不显示的问题以及更换导航栏背景色
问题描述: 遇到一种情况,在一个控制器上(隐藏了导航栏),打开照片选择器 UIImagePickerController后,照片选择器头部一片空白,且上滑相册时,信息会有错乱效果. 原因分析: 通过查 ...
- 嵌入式Linux驱动开发日记
嵌入式Linux驱动开发日记 主机硬件环境 开发机:虚拟机Ubuntu12.04 内存: 1G 硬盘:80GB 目标板硬件环境 CPU: SP5V210 (开发板:QT210) SDRAM: 512M ...
- FineReport报表系统实例方案之医院院长查询分析系统
医院院长查询系统 目前,大中型医院的信息处理正从传统手工方式飞速向电脑信息化建设方案转变,一个大中型医院担负着繁重的医疗和科研任务,以及繁杂的事务性工作,院长必须时刻与各科室保持密切的连续,以便随时了 ...
- sql中视图的作用
视图是一个虚拟表,其内容由查询定义.同真实的表一样,视图包含一系列带有名称的列和行数据.但是,视图并不在数据库中以存储的数据值集形式存在.行和列数据来自由定义视图的查询所引用的表,并且在引用视图时动态 ...
- win10 右键菜单添加使用gvim打开方式
①打开注册表编辑器,开始-->运行-->regedit ②定位到:HKEY_CLASSSES_ROOT---> * --->Shell,在Shell 上右击,新建---> ...
- Stanford coursera Andrew Ng 机器学习课程编程作业(Exercise 1)
Exercise 1:Linear Regression---实现一个线性回归 在本次练习中,需要实现一个单变量的线性回归.假设有一组历史数据<城市人口,开店利润>,现需要预测在哪个城市中 ...
- NOIP2009pj道路游戏[环形DP 转移优化 二维信息]
题目描述 小新正在玩一个简单的电脑游戏. 游戏中有一条环形马路,马路上有 n 个机器人工厂,两个相邻机器人工厂之间由一小段马路连接.小新以某个机器人工厂为起点,按顺时针顺序依次将这 n 个机器人工厂编 ...
- 开启云时代,银狐H5游戏云通迅框架解决方案出炉!
没有时间开发服务器? 不懂服务器开发? 还在为WEB SOCKET烦恼?还在为网络卡,负载承受能力小烦恼? 银狐H5游戏云通迅框架,集成通讯SDK和开放API,1天即可完成 它也是开放平台,提供游戏需 ...
- Java中的四套读写方案
一.字节流读写方案 FileInputStream:字节流方式读取文本文件 FileoutputStream:字节流写入硬盘 二.字符流读写方案 FileReader:字符流读取文本 FileWrit ...