css布局之负margin妙用及其他实现

            <li><img src="img/test.jpg"/></li>   

            <li><img src="img/test.jpg"/></li>   

            <li><img src="img/test.jpg"/></li>   

        </ul>   

这种实现暂时还没发现什么缺点，代码也简单易懂（推荐）
 
3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子） 

CSS Code复制内容到剪贴板

<style type="text/css">   

*{   

    margin: 0;   

    padding: 0;   

}   

img{   

    vertical-align: middle;   

}   

.test1{   

    padding: 0 2%;   

    margin-left: -3.3%;   

}   

ul>li{   

    float: left;   

}   

.test1>li{   

    width: 30%;   

    margin-left: 3.3%;   

}   

ul>li>img{   

    width: 100%;   

}   

.test2>li{   

    width: 33.3%;   

    padding: 0 2%;   

    box-sizing: border-box;   

}   

.test3{   

    display: flex;   

    justify-content: space-between;   

}   

.test3>li{   

    width: 31.3%;   

    padding: 0 2%;   

    float: none;   

}   

.test4{   

    width: 1200px;   

    border: 1px solid red;   

    margin-left: -3.33%;   

}   

.test4>li{   

    width: 30%;   

    margin-left: 3.33%;   

}   

</style>   

<p>3.弹性盒模型flex的实现，需要做兼容处理（旧盒子+新盒子），仅为演示，没做兼容处理</p>   

        <ul class="test3">   

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!