<!-- 画像4枚配置 -->
<div class="imgBox">
<ul>
<li class="img4"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
<li class="img4"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
<li class="img4"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
<li class="img4"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
</ul>
</div>

<!-- 画像3枚配置 -->
<div class="imgBox">
<ul>
<li class="img3"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
<li class="img3"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
<li class="img3"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
</ul>
</div>

<!-- 画像2枚配置 -->
<div class="imgBox">
<ul>
<li class="img2"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
<li class="img2"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></li>
</ul>
</div>

<!-- 画像1枚配置 -->
<div class="imgBox">
<div class="img1"><img src="https://kabuyui-wp.com/wp-content/uploads/2017/07/yakusoku1.jpg" alt=""></div>
</div>
/*画像配置パターン* style.css 2978 - 3062行目
==================================================================================================*/

.imgBox {
    width: 96%;
    margin: 8px auto;
    padding: 8px;
}

.imgBox ul:after,
.imgBox ul:before {
    clear: both;
    content: "";
    display: block;
}

/*4個*/

.img4 {
    width: 23%;
    float: left;
    padding: 8px;
}

@media (max-width: 763px) {
    .img4 {
        width: 46%;
    }
}

/*3個*/

.img3 {
    width: 31%;
    float: left;
    padding: 8px;
}

/*2個*/

.img2 {
    width: 48%;
    float: left;
    padding: 8px;
}

/*1個*/

.img1 {
    width: 96%;
    padding: 8px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

@media (max-width: 763px) {
    .img4 {
        width: 47%;
        padding: 4px;
    }

    .img3 {
        width: 47%;
        padding: 4px;
    }

    .img2 {
        width: 47%;
        padding: 4px;
    }
}

@media (max-width:1028px) and (min-width: 764px) {

    .img4 {
        width: 22%;
        float: left;
        padding: 8px;
    }

    .img2 {
        width: 47%;
        float: left;
        padding: 8px;
    }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.