等比布局

<style>
* {padding: 0; margin: 0; list-style: none; box-sizing: border-box;}
.box {background: orange;}
.box:after {content: ""; display: block; clear: both;}
.box ul {}
.box ul li {width: 25%; float: left; border-right: 1px solid #ccc;}
.box ul li .out {padding-top: 100%; height: 0; position: relative;}
.box ul li .out .in {width: 100%; height: 100%; position: absolute; left: 0; top: 0;}

</style>
<div class="box">
<ul>
<li>
<div class="out">
<div class="in">123456789</div>
</div>
</li>
<li>
<div class="out">
<div class="in">123456789</div>
</div>
</li>
<li>
<div class="out">
<div class="in">123456789</div>
</div>
</li>
<li>
<div class="out">
<div class="in">123456789</div>
</div>
</li>
</ul>
</div>

标签：

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