(编辑:jimmy 日期: 2024/12/24 浏览:2)
相信大家在项目的开发中都遇到过这样的需求,一行放X(X>1)个块且相邻块之间的间距相同。
大概就是上面这个样子,下面介绍几种实现的方式。
1.负margin大法
设置好元素的宽度和留白占满父级的宽度,然后设置父级的margin-left为留白的负留白的宽度
上面的误差是因为ul的margin和li的margin百分比的计算基于的元素不一样导致的,但是在移动端上因为视窗的范围有限,这个差别很小,在pc上一般使用px,所以可以忽略不计。(下面还有更多的办法)
2.各大网站的实现,在元素内部进行填充,使用box-sizing,需要ie8及以上才支持
这种实现暂时还没发现什么缺点,代码也简单易懂(推荐)
3.弹性盒模型flex的实现,需要做兼容处理(旧盒子+新盒子)
这种情况怎么能少了我们flex呢,弹性盒模型应该是专门用来处理这种情况吧,但是又有新旧盒子模型之分,各浏览器实现的都不太一样。所以一般情况两套盒子模型的属性都需要加上。(喜欢折腾就上吧,效果棒棒的)
4.classname实现
将需要特殊处理的元素加上单独的class,再做相应的处理。可以后台进行处理也可以前端处理(推荐后台处理)
5.css选择器实现
:first-child :first-type-of :nth-child() 这些实现都没有什么技术难点,大家可以去查阅一下css文档,注意一下兼容性没问题了
贴上全部的DEMO
差点忘了还有一种情况X=2时,设置好width,左边左浮动,右边右浮动。
其实X=3时,还有一种处理方式,左右元素分别左右浮动,中间元素相对于父级设置绝对定位,居中定位。
注意,由于不能整除的原因,不能像box-sizing那样完美的计算,但是合理的应用在项目上完全没问题。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
原文地址:http://www.cnblogs.com/jesse007/p/5650236.html