子div总是和父div同高

2024-11-05

css 子div自适应父div高度

<div class="out"> <div class="a"></div> <div class="b"></div> <div class="c">当父DIV高度变化随里面DIV高度不同而变化的时候,子DIV仍然能充满高度.</div> </div> .out{ border:1px solid #c0c0c0; overfl

Position a child div relative to parent container in CSS: [设置子DIV位置跟父DIV相关联]

最近调DIV的位置比较头疼,各种position: relative / absolute google到一篇好文章[http://www.webdevdoor.com/html-css/css-position-child-div-parent/] 如何让子div的位置相对父div的位置固定,而父div的位置可以变动. 重点是:父div一定要有position属性(不管relative还是absolute),子div就可以设置position:absolute,这时子div的位置是相对父div

css 父div如何包裹带有float属性的子div,float子div如何撑开父div

来自网络摘抄原始代码 <style> #div1{border:1px solid red;float:left;} #div2,#div3{float:right;border:1px solid blue;} </style> <div id="div1"> <div id="div2">two</div> <div id="div3">one</div>

DIV相对于父DIV底部对齐的实现方法

代码如下 <style type="text/css"> .box1 {border:1px #cccccc solid; width:500px; height:600px;position:relative;} .box2 {border-top:1px #cccccc solid; background:#f2f6fb; width:498px; height:22px; position:absolute; bottom:1;background-color:red

子div设置float后会导致父div无法自动撑开

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注简书: 小贤笔记注: 文章部分转载彩泉 - 博客园原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是几种解决办法(假设父div的class为"container"): 方法1.使用伪类 container::after{ display: block; height:0; co

子DIV块中设置margin-top时影响父DIV块位置的解决办法？

解决方法: 1.修改父元素的高度,增加padding-top样式模拟(padding-top:1px:常用) 2.为父元素添加overflow:hidden:样式即可(完美) 3.为父元素或者子元素声明浮动(float:left:可用) 4.为父元素添加border(border:1px solid transparent可用) 5.为父元素或者子元素声明绝对定位父DIV块中添加:overflow:hidden;触发bfc,margin不会传递给父级(父级触发了BFC)

子div设置margin-top使得父div也跟着向下移动

之前在写网页的时候,发现一个小问题,就是子div设置margin-top的时候,父的div也会跟着向下移动.我用代码和图描述一下问题: <span style="font-size:14px;"><style> *{margin:0;padding:0;} .div1{background:green;height:100px;} .div2{background:darkblue;height:100px;} .subDiv{background:red;he

子div设置浮动无法把父div撑开。

<div class="mainBox"> <div class="leftBox"></div> <div class="rightBox"></div> <div class="clear"></div> </div> 注意:leftBox和rightBox设置浮动之后脱离了普通的文档流,不再占用原来文档中的位置,因此无法把父d

子DIV设置margin-top影响父DIV位置的解决办法

父div如果没有任何东西,子div设置margin-top,父div会下落 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body{padding:0;margin:0;background:#999;} .page-content{min-

子div设置float后导致父div无法自动撑开的问题

子div设置float后会导致父div无法自动撑开原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是几种解决办法(假设父div的class为“container”): 方法1.使用伪类 .container:after{ content: "."; display: block; ; clear: both; visibility: hidden; } .container{ displ

CSS+DIV：父DIV相对定位+子DIV绝对定位

如何在一个div内将一个div进行绝对定位呢?很简单,把父div的position属性设为relative,子div的position属性设为absolute就可以了... 示例: <html> <body> <div>xxxxx<div> <div style="border:1px red solid;width:100%;height:50px;position:relative"> <div style=&quo

【html】【8】div布局[子div在父div居底]

从今天起开始细话div布局思路及要点: 父div的位置设置成相对的,即“position: relative;”. 而子div的位置设置成绝对的,并且下边缘设为0,即“position: absolute; bottom: 0;”. 代码 <head> <title>子div在父div中置底</title> <style type="text/css"> .father { width: 500px; height: 600p

子div块中设置margin-top时影响父div块位置的解决办法

在css中设置样式时,通常会遇到用子div块margin中设置margin-top时,父div块中就会随着子div的margin-top,也会和子div执行相同的margin-top的位置样式解决办法1: 若子div块中使用margin-top,则在父div块中添加:overflow:hidden; 解决办法2: 若由于特殊情况不能在父div块中添加:overflow:hidden,那么在子div块中用padding-top代替margin-top;

父div的透明度不影响子div透明度

在设置div的透明度的时候如果设置了父div的透明度(opacity=0.8),那么子div的透明度也随着改变了,并且设置子div的透明度不起作用. 这种情况下可以使用rgba来设置父div的透明度:例如设置div黑色半透明,可以设置div的background:rgba(0,0,0,0.5).

关于自适应屏幕，设置子元素浮动，父div不能包裹子div，子元素中内容溢出的问题。

设置HTML适应不同分辨率的屏幕. 需求结构如下: HTML结构代码如下(只是其中一条): <body> <div class="content"> <div class="img"><img src="../img/03.png"></div> <div class=&

子div块中设置margin-top时影响父div块位置的解决办法及其原因

解决办法①: 若子DIV块中使用margin-top,则在父DIV块中添加:overflow:hidden; 解决办法②: 在子DIV块中用padding-top代替margin-top. 有个叫 bfc 的东西叫块级元素格式化上下文 overflow hidden 或者描边可以触发 bfc 就可以解决这个问题

子div撑不开父div的几种解决办法：

如何修正DIV float之后导致的外部容器不能撑开的问题在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开.看下面的例子: HTML4STRICT代码: <div style="width:200px;border:1px solid red;"> <div style="float:left;width:

子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 soli

css-子div设置margin-top后，父div与子div一起下移

根据海玉的博客这个问题发生的原因是根据规范,一个盒子如果没有上补白(padding-top)和上边框(border-top),那么这个盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠. 再说白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己"领导"(父元素,祖先元素)的麻烦.只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己

子div撑不开父div

方法一:推荐设置父div的overflow:hidden; 方法二: 父div结束前增加一个空div style=”clear:both;” .clear { clear:both; } <div> <div style=”float:left;”> <div class=” clear” /> </div> 方法三:由方法二变换: .clearfix:after { content: "."; display: block; heig

子div总是和父div同高

热门专题