本文介绍了父div如果子div是绝对的,则不会获得高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我只是停留在位置,对于父母和位置,我使用了 position:relative :绝对为孩子现在父div没有得到高度,我不想使用 min-height 或高度。你可以在顶部看到红色的 border ,它是父div border 。
小提琴代码
.box {text-align:center;边框:1px纯红色;宽度:500px;保证金:0汽车; position:relative;}。content {width:50%;位置:绝对;左:0;正确:0; margin:0 auto;}
< div class =框> < div class =content> Lorem ipsum dolor坐amet,consectetur adipisicing elit。 Assumenda adipisci vel,dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat temporal voluptate totam exercitationem neque quae。 < / div>< / div>
?
谢谢
解决方案流动,所以它不能再改变其父母的措施。试试这个,它运行正常:
.box { text-align:center; border:1px纯红色; width:500px; 身高:100%; margin:0 auto; } .content {宽度:50%; margin:0 auto; }
I just stuck in position, I used position:relative for parent and position:absolute for child now parent div did't get height and i don't want to use min-height or height. You can see the red border on top which is the parent div border.
fiddle code
.box { text-align: center; border: 1px solid red; width: 500px; margin: 0 auto; position: relative; } .content { width: 50%; position: absolute; left: 0; right: 0; margin: 0 auto; }<div class="box"> <div class="content"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda adipisci vel, dolore aspernatur iste iure blanditiis quam esse repudiandae aperiam debitis doloribus necessitatibus placeat tempora voluptate totam exercitationem neque quae. </div> </div>
Help me please ?
Thanks
解决方案Absolute positioning takes an element out of normal flow, so it can not change the measures of its parent any more. Try this, it works fine:
.box { text-align: center; border: 1px solid red; width: 500px; height:100%; margin: 0 auto; } .content { width: 50%; margin: 0 auto; }
更多推荐
父div如果子div是绝对的,则不会获得高度
发布评论