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

相信大家在项目的开发中都遇到过这样的需求，一行放X（X>1）个块且相邻块之间的间距相同。

大概就是上面这个样子，下面介绍几种实现的方式。
 
1.负margin大法
 
设置好元素的宽度和留白占满父级的宽度，然后设置父级的margin-left为留白的负留白的宽度

CSS Code复制内容到剪贴板

<style type="text/css">    

*{   

 margin: 0;   

 padding: 0;   

}   

img{   

 vertical-align: middle;   

}   

ul>li{   

 float: left;   

}   

ul>li>img{   

 width: 100%;   

}   

.test1{   

padding: 0 2%;   

margin-left: -3.3%;   

}   

.test1>li{   

width: 30%;   

margin-left: 3.3%;   

}   

</style>   

 <p>1.关于负margin的实现，由于margin是基于父级计算的，会有一定的偏差，但是用于移动端上，误差可以忽略不计</p>   

        <ul class="test1 clearfix">   

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

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

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

        </ul>    

上面的误差是因为ul的margin和li的margin百分比的计算基于的元素不一样导致的，但是在移动端上因为视窗的范围有限，这个差别很小，在pc上一般使用px，所以可以忽略不计。（下面还有更多的办法）
 
2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持 

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>2.各大网站的实现，在元素内部进行填充,使用box-sizing，需要ie8及以上才支持</p>   

        <ul class="test2 clearfix">   

（编辑：好传媒网）

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