Proportional layout, proportional scaling Layout

Proportional layout, proportional scaling Layout

<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">
& Lt; div class = "in" & gt; 123456789 & lt;/div & gt;
</Div>
</Li>
<Li>
<Div class = "out">
& Lt; div class = "in" & gt; 123456789 & lt;/div & gt;
</Div>
</Li>
<Li>
<Div class = "out">
& Lt; div class = "in" & gt; 123456789 & lt;/div & gt;
</Div>
</Li>
<Li>
<Div class = "out">
& Lt; div class = "in" & gt; 123456789 & lt;/div & gt;
</Div>
</Li>
</Ul>
</Div>