1. 隨子元素div高度自適應(yīng)
如何下面的child1和child2浮動朴肺，parent高度就會為0窖剑，前提child1和child2都有高度，如果你想parent的高度自適應(yīng)戈稿，請繼續(xù)閱讀
<body>
<div class="parent">
<div class="child1"></div>
<div class="child2"></div>
</div>
</body>
- 樣式省略
方法1
.parent{
overflow:hidden;
}
方法2
- 會使用到偽元素：after,如果不懂請看偽元素
.parent:after{
content: " ";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
2. 根據(jù)div寬度的百分比調(diào)整div高度
假設(shè)我的div寬度會自動變化,但是我的高度只想設(shè)置成div寬度的一半,該如何實(shí)現(xiàn)呢?
<body>
<div class="main"></div>
</body>
- 設(shè)置main的高度為寬度的一半
.main:after{
display: block;
content: ' ';
padding-top: 50%;
border: 1px solid black;/*便于看出div的效果*/
}
