list-style-type保留同时columns两端对齐实例页面

效果：

图片名称1

图片名称2

图片名称3
图片名称4

图片名称5

图片名称6

代码：

CSS代码：

li {
    columns: 3 30px;
    margin-top: 20px;
}
.list {
    background: #f0f3f9;
    padding: 15px;    
}
.list img {
    width: 100%;
    vertical-align: top;    
}
.list p {
    margin: 10px 0 -2px;
}

HTML代码：

<ul>
    <li>
        <div class="list">
            <img src="http://image.zhangxinxu.com/image/study/s/s512/mm1.jpg">
            <p>图片名称1</p>
        </div>
        <div class="list">
            <img src="http://image.zhangxinxu.com/image/study/s/s512/mm7.jpg">
            <p>图片名称2</p>
        </div>
        <div class="list">
            <img src="http://image.zhangxinxu.com/image/study/s/s512/mm3.jpg">
            <p>图片名称3</p>
        </div>
    </li>
    <li>
        <div class="list">
            <img src="http://image.zhangxinxu.com/image/study/s/s512/mm4.jpg">
            <p>图片名称4</p>
        </div>
        <div class="list">
            <img src="http://image.zhangxinxu.com/image/study/s/s512/mm8.jpg">
            <p>图片名称5</p>
        </div>
        <div class="list">
            <img src="http://image.zhangxinxu.com/image/study/s/s512/mm6.jpg">
            <p>图片名称6</p>
        </div>
    </li>
</ul>