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>