纯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;
           }

巴特西

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

最新文章

热门文章