前端入坑紀(jì) 23

回顧下平時(shí)做得東西，最近這個(gè)高度適應(yīng)有點(diǎn)生疏，發(fā)篇簡書和大家探討下，互相學(xué)習(xí)！

簡單樸素的效果圖

樣子丑，望君勿噴！

OK，first things first！項(xiàng)目鏈接

HTML 結(jié)構(gòu)

    <div class="imgWrp clear">
        ![壁紙](http://upload-images.jianshu.io/upload_images/4732938-ece114fc2273948a.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        <div class="paraWrp">
            這就是個(gè)任性的div.paraWrp，絕對(duì)定位才能自適應(yīng)父級(jí)div.imgWrp高度<br>
            <p>
                這里的p絕對(duì)定位到top:50%,left:50%
                <br> 然后相對(duì)自己 transform: translate(-50%, -50%)
                <br> 這樣就有了垂直居中的效果
            </p>
            div.imgWrp高度是被圖片撐開的
        </div>
    </div>

換了個(gè)形式寫注解，css里也會(huì)相應(yīng)備注的。

CSS 結(jié)構(gòu)

        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        img {
            border: none;
        }
        
        .clear::after {
            content: "";
            display: table;
            clear: both
        }
        
        .imgWrp {
            position: relative;
            margin: 1rem;
            border: 1px solid #ccc;
        }
        
        .imgWrp img {
            float: left;
            width: 50%;
        }
        
        /*div.paraWrp絕對(duì)定位，以便適應(yīng)div.imgWrp的高度*/
        .imgWrp div {
            position: absolute;
            right: 0;
            top: 0;
            bottom: 0;
            width: 50%;
            background-color: #f3f3f3;
            text-align: center;
            font-size: 15px;
            line-height: 180%;
        }
        

        /*段落垂直居中的樣式*/
        .imgWrp div p {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 80%;
            height: 40%;/*因?yàn)楦讣?jí)div.paraWrp絕對(duì)定位，所以高度40%也有效了*/
            color: #fff;
            background-color: #999;
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

不曉得子元素高度自適應(yīng)它的父級(jí)，除了絕對(duì)定位還有木有別的css方法，不吝賜教！