等比布局

<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>