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

最新推荐文章于 2024-12-16 23:15:26 发布

weixin_33787529

最新推荐文章于 2024-12-16 23:15:26 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/laiyt/p/7568357.html

本文介绍了一种使用纯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;
           }