CSS note

HTML

<div class="wrapper2">
	<div class="rd-square" style="width:61.450%">
		<div class="content centered">test</div>
	</div>
	<div class="rd-square" style="width:38.1679%">
		<div class="content centered">test</div>
	</div>
	<div class="rd-square" style="width:7.6335%">
		<div class="content centered">test</div>
	</div>
	<div class="rd-square" style="width:7.6335%">
		<div class="content centered">test</div>
	</div>
	<div class="rd-square" style="width:23.0916%;">
		<div class="content centered">test</div>
	</div>
	<div class="" style="width:15.2671%;height:0;padding-bottom:15.2671%;position:absolute;right:23.0916%;bottom:0;top:auto;left:auto;">
		<div class="content centered" style="margin-top:calc(100% / 2 - 1em );">test</div>
	</div>
</div>

CSS

.rd-square{
 outline:1px solid #ccc;
 vertical-align:top;
 float:left;
}
.wrapper{
 overflow:hidden;
 width:524px;
 margin:auto;
 border-bottom:1px solid #ccc;
 position:relative;
}
.wrapper2{
 overflow:hidden;
 width:90vmin;
 margin:auto;
 border-bottom:1px solid #ccc;
 position:relative;
}

新着記事