`
iluoxuan
  • 浏览: 571487 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

div自适应的问题,有float等情况下处理

 
阅读更多

http://developer.51cto.com/art/201008/222367.htm,解决办法

 

1: 本来 div父容器会随着子div的高度变化而自适应的,

 

2:如果子div使用了float属性,此时已经脱离标准流,父div不会随内容的高度变化而变化,解决的办法是在浮动的div下面,加一个空div,设置clear属性both。

 

<div style="clear:both"></div>

 

 

看来对css的理解还是要多多处理啊

分享到:
评论

相关推荐

    子div含float,父div高度自适应的div+css布局写法

    div+css高度自适应网页布局,子div含float,父div高度自适应,已经通过测试的浏览器:ie6、ie7、ie8、火狐、Chrome。 代码来源: http://www.positioniseverything.net/articles/onetruelayout/equalheight

    Firefox div高度自适应

    1.如果div想要一个最小高度,那么应该用css的minheight这个属性,但是IE不支持,考虑到大多数用户都使用IE,所以一般情况下这个属性基本上弃置不用。在IE里面,height基本上就可以当作minheight来用,因为如果内容...

    Div使用margin居中常见问题

    (意思是:上下边界为0,左右根据宽度自适应)可以让div等块级元素达到居中的效果,但是往往我们发现虽然我们已经加入margin:0 auto;却仍然没有实现居中。 这往往是由以下两种常见原因引起的: 1、没有设置宽度 2、没...

    相邻div实现一个跟着另一个自适应高度示例代码

    复制代码代码如下: &lt;!... &lt;head&gt; &lt;title&gt;new document&lt;/title&gt;...style type=”text/css”&... } .wrap .left{ float:left; width:50%; background:#eee; padding-bottom:3000px; margin-bottom:-3000p

    css 水平居中,垂直居中,自适应宽度的代码

    一、宽度自适应的元素水平居中:  1.宽度自适应的元素可以是:绝对位定、浮动元素、行内元素。而我们通常布局,肯定不会用行内元素,所以会选择,绝对定位或浮动。 2.居中:这里我们应该会想到1/2、50%、一半等...

    高度导致IE6中两个DIV有3px空隙问题_margin-right/left可解决

    最近做的页面基本上都是自适应的,经常使用如下的...左边的DIV使用float,右边的DIV则自适应。昨天给右边的DIV添加了一个高度,发现在IE6中出现了问题。(以下两个实例的区别只能在IE6中才能看到) 左边DIV 此DIV未

    js实现屏幕自适应局部代码分享

    有小伙伴留言说需要一个js实现屏幕自适应局部的代码,这里简单整理了下,放出来给大家。 代码如下: &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=”utf-8″&gt; &lt;title&gt;无标题文档&lt;/...

    css与javascript跨浏览器兼容性总结

    如果父div没有设float而其子div却设了float的话,父div无法包住整个子DIV,这种情况一般出现在一个父DIV下包含多个子DIV。解决办法: 1) 给父DIV也设上float 2) 在所有子DIV后新加一个空DIV(目前Ext是这么做的),...

    HTML实现2列布局(左侧宽度固定,右侧自适应)的方法示例

    HTML实现2列布局,左侧宽度固定,右侧自适应 实现一: ... div:nth-of-type(1){ float: left; //利用浮动 // postion: absolute; //利用绝对定位 // top: 0; // left: 0; width: 300px; hei

    46种常见的浏览器兼容性问题大汇总

    17. IE6下图片下有空隙产生 3 18. 对齐文本与文本输入框 3 19. LI中内容超过长度后以省略号显示 3 20. 为什么web标准中IE无法设置滚动条颜色了 3 21. 为什么无法定义1px左右高度的容器 3 22. 链接(a标签)的边框...

    div+css布局中简单的样式

    div+css布局中简单的样式,例如: 左右自适应布局 #left { background-color: #FFFF33; height:250px; width:25%; border:10px solid #000000; float:left; margin:10px; }

    CSS三列布局两端固定宽度中间自适应

    复制代码代码如下: &lt;div class=”wrap”&gt; &lt;div class=”main”&gt; &lt;div class=”content”&gt;&lt;/div&gt; &lt;/div&gt; &lt;div class=”submain”&gt;2&lt;/div&gt; &lt;div class=”sidebar”&gt;3&lt;/div&gt; &lt;/div&gt; 复制代码代码如下: .wrap{width: ...

    css中float left与float right的使用说明

    No! 要注意以下几点: 1、 浮动元素会被自动设置成块级元素,相当于给元素设置了display:block(块级元素能设置宽和高,而行内元素则...常见的块级元素有:h1~h6、p、div、ul、table,常见的行内元素有:span、a、inpu

    float:left的对象(导航)如何居中示例探讨

    [float:left]有个伟大之处,它使div(或者其他标签)的宽度自适应其内容,但它却有个弊端:无法居中。 [display:inline-block]也有同样的特性,并且可以居中,但连续几个这样的东东,之间却会出现空格。 为了解决这...

    web前端开发中常见的多列布局解决方案整理(一定要看)

    这里会提到的多列布局有两列定宽加一列自适应、多列不定宽加一列自适应、多列等分三种。 两列定宽加一列自适应布局 本布局模式一共分为三列,其中两列宽度固定,一列宽度随内容宽度而改变。简易实现代码如下: 两列...

    DIV+CSS 三栏布局实例代码

    1.要求:如上图中的,三栏目布局,中间的MAIN是自适应浏览器的宽度,左LEFT固定宽200PX,右RIGHT固定宽200PX; 复制代码代码如下: .right,.left{height:300px;width:200px;} .right{ float:right;background:#000000...

    DIV设置float后父容器无法定位高度的问题解决方法

    就是在父容器的添加一个子容器,该子容器位于父容器中子容器列表的最后。并且给该子容器添加一个样式:clear:both;。就这么简单,你就可以让你的父容器自适应浮动子容器的高度了。

Global site tag (gtag.js) - Google Analytics