子div绝对定位后不能内部div撑开外部div父div,不知道怎么解决

来源：蜘蛛抓取(WebSpider) 时间：2016-11-03 10:44 标签： 内部div撑开外部div
浮动以后父DIV包不住子DIV解决方案
转载自.cn/s/blog_6c363acf0100v4cz.html
当DIV1里面嵌套有一个DIV2，当DIV2设置了浮动，那么DIV1是无法被撑开的，也就是说DIV2在这里相当于浮在了页面上方，跟DIV1不在同一个层面，导致了DIV2无法把DIV1给撑开，这是一个老生常谈的问题，也是困扰很多刚接触DIV+CSS的朋友的一个问题。
先来看看这个问题的实际效果
这里本来DIV1是套在了DIV2的外面的，如果是使用表格做的话，那么DIV1肯定被撑开了，效果应该是如下所示
那如何解决这个浮动了之后无法把容器撑开的局面呢？解决的方法这里介绍2仲。
第一种：在浮动结束的容器后面加上这段代码
&div style=&clear:&&&/div&意思是清除浮动。
第二种：在外层DIV，也就是这里的DIV1的CSS里面加入以下CSS代码
overflow:这2种方法都可以实现DIV2把DIV1撑开。不过这里建议大家使用第一种方法，要养成一个习惯，在浮动应用完后消除浮动，这样后面的DIV就不会继承这个浮动（就像在编程的时候，在打开数据库，操作完后，要养成个习惯在后面把数据库关闭）。也就是说浮动这个东西会被继承，除非消除这个浮动，才不会让后面接着的DIV受到继承。其实不仅是DIV，其他的像P等其他的容器都会有继承的效应，大家要养成一个习惯记得要消除浮动。
> 本站内容系网友提交或本网编辑转载，其目的在于传递更多信息，并不代表本网赞同其观点和对其真实性负责。如涉及作品内容、版权和其它问题，请及时与本网联系，我们将在第一时间删除内容！
div 之 float, clear 特性 一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开. 如果想要撑开父元素可以采用以下方法: 方法一: 父元素设置overflow以及zoom,样式如下: 1 &style& 2
#div1{border:1overflow:zoom: ...
设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): &body& &div class=&content&&&!--用于包裹一条内容--&
&div class=&img&&&img src=&../ ...
情况一:当鼠标移入(onmouseover)父级div(红色)时,子div(蓝色)显示(黑点代表鼠标): 情况二:当子div(蓝色)处于显示状态时,把鼠标移动到上面.此时鼠标已经脱离父div(红色),但子div仍然显示.白色代表鼠标移动轨迹. 请问为什么鼠标移出父div(红色)时,为什么子div还能显示(蓝色)?这种表现背后的工作原理是什么样的呢? & ...
看到标题的时候,一下子不知道说的是什么意思? 我解释一下: 就是在默认的情况下,当我们设置&div style=&width:100%;&&&/div&的时候div的宽度为浏览器的宽度. 现在有这样一个布局: &div id='father' style='height:200background:gr ...
一个Div包含了多个子Div,并且子Div使用了浮动后,父Div确不能被撑开. 部分代码如下: &style& #div1{border:1float:} #div2,#div3{float:border:1} &/style& &div id=&quo ...
这两天做了一个滚动广告栏的demo 功能有自动轮播 左右箭头移动 导航点选中图片移动效果 模仿的是新浪体育的广告 最难的问题就是子div绝对定位于父div 鼠标移入子div 系统会判定鼠标移出了父div 所以会触发子div消失的效果 消失完因为鼠标在父div中 所以又触发了子div出现的效果
这样就会导致子div一直重复消失出现 形成闪烁的效果 在网上没有 ...
子级对象使用css float浮动 而父级div不能自适应高度.
对父级div标签闭合&/div&前加一个clear清除浮动对象. &!DOCTYPE html& &html& &head& &meta charset=&utf-8& /& &title&父div ...
解决子级对象使用css float浮动 而父级div不能自适应高度,不能被父级内容撑开解决方法,父级div没有高度解决方法. 最外层的父级DIV不能自适应高度-不能随对象撑开没有高度
当在对象内的盒子使用了float后,导致对象本身不能被撑开自适应高度,这个是由于浮动产生原因. 如何解决父div对象自适应高度,方法有三种,接下来DIVCSS5逐一介绍.21:28 提问
为什么我把这个div设置绝对定位，他的父容器位置会变化？
如题，我把第9和第12个方块设置为绝对定位，脱离文本流，可是为什么父容器container会向下挪？
不是应该两个container一样高，子容器往上移吗？现在是每绝对定位一个，父容器就往下走一格了
&!DOCTYPE html&
&meta charset="utf-8"&
&title&小练习5&/title&
&link rel="stylesheet" type="text/css" href="practice5.css"&
&div class="container"&
&div class="draggable"&1&/div&
&div class="draggable"&2&/div&
&div class="draggable"&3&/div&
&div class="draggable"&4&/div&
&div class="draggable"&5&/div&
&div class="draggable"&6&/div&
&div class="container"&
&div class="draggable"&7&/div&
&div class="draggable"&8&/div&
&div class="draggable" style="position:"&9&/div&
&div class="draggable"&10&/div&
&div class="draggable"&11&/div&
&div class="draggable" style="position:"&12&/div&
&script type="text/javascript" src="practice5.js"&&/script&
//下面是css
margin: 0;
padding: 0;
-webkit-box-sizing: border-
-moz-box-sizing: border-
box-sizing: border-
.container{
width: 200
height: 400
display: inline-
margin: 40
.container div{
width: 200
height: 40
display: inline-
background-color: #c55342;
按赞数排序
在你的class container中添加float:left，就可以使两个container对齐了。
2515关注|623收录
2014关注|261收录
2283关注|1143收录

我要回帖

更多关于 内部div撑开外部div 的文章

 

随机推荐