子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的相对高度. 这 ...
随机推荐
- shell脚本变量
既然是变量,自然分变量名和变量值,在使用的时候一定要注意哪些地方需要用变量名,哪些地方需要用变量的值. 自定义变量 shell变量不需要声明,随用随定义,给变量赋值的时候要注意 shell是空格敏感的 ...
- x01.os.16: 添加功能
准备工作 1.确保是 win xp,如是 win 8,运行 nasm 需按提示同意安装组件. 2.确保 src 和 z_tools 在同一目录下,nasm 已包含在 z_tools 文件夹中. ...
- spring 注入一个以枚举类型对象
1.枚举 在实际编程中,往往存在着这样的“数据集”,它们的数值在程序中是稳定的,而且“数据集”中的元素是有限的. 例如星期一到星期日七个数据元素组成了一周的“数据集”,春夏秋冬四个数据元素组成了四季的 ...
- HttpURLConnection用法详解
针对JDK中的URLConnection连接Servlet的问题,网上有虽然有所涉及,但是只是说明了某一个或几个问题,是以FAQ的方式来解决的,而且比较零散,现在对这个类的使用就本人在项目中的使用经验 ...
- BeJavaGod - 如何正确使用数据字典进行分类统一操作(一)
先说说什么是数据字典,这个玩意一般不太会解释,举个栗子吧~ 每个系统都会有用户表,性别:男(1)女(0) 另外我们做物流的会涉及到车型:卡车(1),轿车(2),挂车(3) 货物类型:危险品(1),普通 ...
- POJ3321Apple Tree[树转序列 BIT]
Apple Tree Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 26995 Accepted: 8007 Descr ...
- instanceof
java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例. instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或者是它的子类的一个实例. result ...
- NVIDIA显卡设置
在玩3D游戏时,因为我的显卡不是特别给力,所以针对性能做出牺牲质量换取性能的调整. 简单设置 简单的方法是,3D设置-通过预览调整图像设置,根据偏重点来设置平衡:性能或者质量. 高级设置 如果你想自行 ...
- Linux设备驱动之中断支持及中断分层
快速中断:在开启快速中断时,其他中断不会打断快速中断. 多个中断共享一个中断号. 中断行为受到限制: 1.不能使用可能引起阻塞的函数 2.不能使用可能引起调度的函数 中断注册:request_irq( ...
- 协议的分用以及wireshark对协议的识别
在TCP/IP详解一书中谈到了协议的分用,书中的图1-8如上.图1-8可以很好地解释在互联网的分层结构中,底层的协议头是如何承载上层的不同的协议的.对于链路层而言,以太网首部中有不同帧类型用于表示以太 ...