1、css样式代码
ul{
overflow:hidden;
}
ul li{
float:left;
width:50%;
}
//这是关键代码
.out_wapper{
position:relative;
height:0;
padding-top:100%;
}
.out_wapper .square{
border:1px solid #dddddd;
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
text-align:center;
}
2、html代码
<ul>
<li>
<div class="out_wapper">
<div class="border-eaeaee font0 pos-a left0 top0 per100 ht100p tc">
<p>这是一个宽高自适应的正方形</p>
</div>
</div>
</li>
<li>
<div class="out_wapper">
<div class="border-eaeaee font0 pos-a left0 top0 per100 ht100p tc">
<p>这是一个宽高自适应的正方形</p>
</div>
</div>
</li>
</ul>
(编写高质量代码,一个专业致力于页面转化,切图的前端爱好者~~)