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

这种情况怎么能少了我们flex呢，弹性盒模型应该是专门用来处理这种情况吧，但是又有新旧盒子模型之分，各浏览器实现的都不太一样。所以一般情况两套盒子模型的属性都需要加上。（喜欢折腾就上吧，效果棒棒的）
 
4.classname实现
 
将需要特殊处理的元素加上单独的class，再做相应的处理。可以后台进行处理也可以前端处理（推荐后台处理） 

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{   

    padding: 0 2%;   

}   

.test4>li{   

    width: 30%;   

    margin-left: 5%;   

}   

.test4>li.first{   

    margin: 0;   

}   

.test5{   

    padding: 0 2%;   

}   

.test5>li{   

    width: 30%;   

    margin-left: 5%;   

}   

.test5>li:first-child{   

    margin: 0;   

}   

</style>   

<p>4.classname实现</p>   

        <ul class="test4 clearfix">   

（编辑：PHP编程网 - 黄冈站长网）

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