纯CSS写正方形自适应宽高，且左侧高与正方形高保…

先上图

虽然写法有点暴力，但是效果还是可以的，哈哈哈哈哈
html:
<div class="box">
            <div class="left">
                <div class="zfxCon" style="">leftleftleftleftleftleftleftleftleftleftleftleft</div>
            </div>
            <div class="zfx">
                <div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
            </div>
            <div class="zfx">
                <div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
            </div>
            <div class="zfx">
                <div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
            </div>
            <div class="zfx">
                <div class="zfxCon" style="">正方形正方形正方形正方形正方形正方形正方形正方形正方形正方形</div>
            </div>
        </div>

css:

.box{
                color: #f00;
                width: 100%;
                float: left;
                background-color: #269ABC;
            }
            .left{
                width: 20%;
                height: 0;
                float: left;
                margin:5% 2%;
                padding-bottom: 70%;
                position: relative;
            }
            .zfx{
                width: 30%;
                height: 0;
                float: right;
                margin: 5% 2%;
                padding-bottom: 30%;
                position: relative;
            }
            .zfxCon{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                overflow: auto;
                word-wrap: break-word;
            }

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有