レスポンシブでの横並びのBOX方法 4列
<div class="col_4">
<div>
<p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">上級者及び専門家対象コース<br>(音大受験生含む)</a></p>
</div>
<div>
<p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">20才以上の入門<br>初心者および中級者</a></p>
</div>
<div>
<p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">新設<br>スチューデントコース</a></p>
</div>
<div>
<p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">特別コース <br>M・A・Sテクニック<br>(身体と会話するストレッチ&呼吸法)</a></p>
</div>
<div>
<p class="btn taC mt30"><a class="btn-type02-1" href="[getHome]/experience/">新設キッズコース</a></p>
</div>
</div>
【css 4列】
*, *:before, *:after {
box-sizing: border-box;
}
.col_4{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
}
.col_4 > div{
width: 25%;
padding: 10px;
}
@media screen and (max-width: 960px) {
.col_4 > div{
width: 33.33333%;
}
}
@media screen and (max-width: 480px) {
.col_4 > div{
width: 50%;
}
}
【css ボタン】
.btn-type02-1 {
font-size: 18px;
font-size: 1.8rem;
display: inline-block;
width: 400px;
text-align: center;
position: relative;
background: #3D1408;
border: 2px solid rgba(255, 255, 255, .6);
color: #fff;
line-height: 1.1;
padding: 1em 0;
z-index: 1;
overflow: hidden;
.mt30 {
margin-top: 30px!important;
}
.taC {
text-align: center!important
}