CSS: 解决Div float后,父Div无法高度自适应的问题
在用CSS+DIV的布局中,常常会发现,当一个DIV float之后,假设他的高度超过了其父DIV的高度时,其父DIV的高度并不会对应的进行调整。要解决问题(也叫做闭合(清除)浮动),我们有四种办法:
1. 额外标签法
这样的方法就是向父容器的末尾再插入一个额外的标签,并令其清除浮动(clear)以撑大父容器。这样的方法浏览器兼容性好,没有什么问题,缺点就是须要额外的(并且一般是无语义的)标签。我个人比較喜欢这样的方法,由于它简单、有用、浏览器兼容性好,并且这样的方法也是W3C推荐的方法
<div style="clear:both;"></div>
或者使用
<br style="clear:both;" />
2. 使用after伪类
这样的方法就是对父容器使用after伪类和内容声明在指定的如今内容末尾加入新的内容。常常的做法就是加入一个“点”,由于它比較小不太引人注意。然后我们再利用它来清除浮动(闭合浮动元素),并隐藏这个内容。这样的方法兼容性一般,但经过各种 hack 也能够应付不同浏览器了,同一时候又能够保证html比較干净。
#outer:after { content:"."; height:0; visibility:hidden; display:block; clear:both; } |
3. 设置overflow为hidden或者auto
这样的做法就是将父容器的overflow设为hidden或auot就能够在标准兼容浏览器中闭合浮动元素。只是使用overflow的时候,可能会对页面表现带来影响,并且这样的影响是不确定的,你最好是能在多个浏览器上測试你的页面。
#outer { overflow:auto; zoom:1; } |
overflow:auto;是让高度自适应, zoom:1;是为了兼容IE6,也能够用height:1%;的方式来解决。
4. 浮动外部元素,float-in-float
这样的做法就是让父容器也浮动,这利用到了浮动元素的一个特性——浮动元素会闭合浮动元素。这样的方式在 IE/Win 和标准兼容浏览器中都有较好的效果,但缺点也非常明显——父容器未必想浮动就浮动的了,毕竟浮动是一种比較特殊的行为,有时布局不同意其浮动也非常正常。
看一下自己代码的样例吧:
<div style="overflow: auto;">
<s:iterator value="lstProductPicture" id="productPicture">
<div style="float:left;">
<img
src="../dms/get.html?path=<s:property value="#productPicture.path" />"
alt="" style="display: inline-block; width: 93px; height: 90px" /> <br></br>
<input type="button" value="删除" onclick="delpicture('${productInfo.id }', '${productPicture.path }');"/>
</div>
</s:iterator>
</div>
里面迭代会出现非常多div 里面的div会向左浮动,因而是父div的高度无法自适应问题的出现。
CSS: 解决Div float后,父Div无法高度自适应的问题的更多相关文章
- 解决子元素用css float浮动后父级元素高度自适应高度
1.在最后一个子元素后面清除浮动 2.父元素加over-flow:hidden;(副作用:子元素定位不能超出父元素的范围) 3.父元素也一样浮动(最笨的方法): 4.子元素使用inline-block ...
- 使用contenteditable+div模拟textarea文本域实现高度自适应
使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...
- css 父div如何包裹带有float属性的子div,float子div如何撑开父div
来自网络摘抄 原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px ...
- css实现遮罩层,父div透明,子div不透明
使用元素的opacity 属性,设置遮罩层的效果, 主要 样式是:background-color: #ooo; opacity:0.3; <div style="width:500p ...
- 前端页面div float 后高度 height 自适应的问题
最近在画项目页面的时候遇到了一个左侧div一旦加上float:left 属性后,设置其高度height:100% 不起作用,后来网上查了半天也没有找到很好的解决方案,只在csdn里发现了这个马上记录下 ...
- 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 ...
- DIV相对于父DIV底部对齐的实现方法
代码如下 <style type="text/css"> .box1 {border:1px #cccccc solid; width:500px; height:60 ...
- CSS - 解决使用浮动,父窗体不能撑高问题
浮动的父级元素一定要用 clear 清除浮动,否则高度会无法撑开.
- css解决select下拉表单option高度的办法
css在给select下拉表单设置样式如边框时可以轻松搞定,而我们在不喜欢其默认的下拉箭头的样式时试图通过background:url(图片路径)来修改之,则往往会出现浏览器的兼容性问题,在网上查了好 ...
随机推荐
- codeforces.com/contest/325/problem/B
http://codeforces.com/contest/325/problem/B B. Stadium and Games time limit per test 1 second memory ...
- Java发展的时间表
Java发展的时间表. (版本号 名称 中文名 发布日期) JDK 1.1.4 Sparkler 宝石 1997-09-12 JDK 1.1.5 Pumpkin 南瓜 1997-12-13 JDK 1 ...
- 使用Ajax以及Jquery.form异步上传图片
一.前言 之前做图片上传一直用的第三方插件,Uploadify 这个应该是用的比較多的,相同也用过别的,在方便了自己的同一时候也非常赞叹人家的功能. 思来想去,仅仅会用别的人东西,始终自己学到的少, ...
- UIImagePickerController本地化控件文字
在使用UIImagePickerController时候,你会发如今选择照片或者拍照的时候,界面的很多控件都是英文的,比方"Cancel","Choose"等. ...
- python+ueditor+七牛云存储整合
开发环境:python pyramid. 參考网址:http://developer.qiniu.com/docs/v6/sdk/python-sdk.html,http://my.oschina.n ...
- SQL Syscolumns
每个表和视图中的每列在表中占一行,存储过程中的每个参数在表中也占一行.该表位于每个数据库中. 列名 数据类型 描述 name sysname 列名或过程参数的名称. id int 该列所属的表对象 I ...
- Eclipse上运行Python,使用PyDev
转自:http://www.ibm.com/developerworks/cn/opensource/os-cn-ecl-pydev/index.html 级别: 初级 郑 伟芳 (zhengwf@c ...
- oracle database 12c R1 安装文档
INSTALLORACLE DATABASE 12C 完整的安装文档下载地址: http://download.csdn.net/detail/royjj/5665869 OS:ORALCE LINU ...
- pygame系列_font游戏字体
在pygame游戏开发中,一个友好的UI中,漂亮的字体是少不了的 今天就给大伙带来有关pygame中字体的一些介绍说明 首先我们得判断一下我们的pygame中有没有font这个模块 1 if not ...
- JS类定义方式
// 方法1 对象直接量 var obj1 = { v1 : "", get_v1 : function() { return this.v1; }, set_v1 : funct ...