前端入坑纪 23

回顾下平时做得东西，最近这个高度适应有点生疏，发篇简书和大家探讨下，互相学习！

简单朴素的效果图

样子丑，望君勿噴！

OK，first things first！项目链接

HTML 结构

    <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">
            这就是个任性的div.paraWrp，绝对定位才能自适应父级div.imgWrp高度<br>
            <p>
                这里的p绝对定位到top:50%,left:50%
                <br> 然后相对自己 transform: translate(-50%, -50%)
                <br> 这样就有了垂直居中的效果
            </p>
            div.imgWrp高度是被图片撑开的
        </div>
    </div>

换了个形式写注解，css里也会相应备注的。

CSS 结构

        * {
            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绝对定位，以便适应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%;/*因为父级div.paraWrp绝对定位，所以高度40%也有效了*/
            color: #fff;
            background-color: #999;
            transform: translate(-50%, -50%);
            overflow: hidden;
        }

不晓得子元素高度自适应它的父级，除了绝对定位还有木有别的css方法，不吝赐教！