文章目录
  1. 1. 列表的三种布局方式
    1. 1.1. table
    2. 1.2. float 加 %
    3. 1.3. 弹性盒子
    4. 1.4. 小结
  2. 2. 如何选型

首先,回顾下自己今天的工作过程:边写边删,再写再删,效率极其低下。而且中间心情也很糟糕,脾气有点急躁。原因:

  1. 昨天熬夜了,看《琅琊榜》,到凌晨4点:胡歌依旧那么帅,虽然和逍遥哥哥的帅不一样。刘涛很漂亮啊,演技也很好的样子。靖王酷酷哒,竟然有我家冯叔的影子,尤其是眼睛和嘴巴,不过比我冯叔脸小。。。咳咳,言归正传。缺觉,导致今天脑子不好使了,变笨了。这是大前提。
  2. 没了思考时间:越想赶紧把那个ui搞定,结果就越想“立马”干活,导致写之前没动脑子。
  3. 手生:我不编移动 box 好多年,常规和常识性的问题,没能提前规避,而是 try try try
  4. 心…有点不静最近。昨天之所以发呆看电视打发时间,是因为昨天回家路上情绪莫名超级无敌低落,结果到家后整个人都很阴郁一点都不high。

特此记录下,好提醒自己,以后别犯此类白痴错误了。引以为戒。

这边博客的主题是:乍看起来极其简单的列表ui,在移动端,应该用 table 还是 ul?ul 是应该弹性盒子还是浮动?

列表的三种布局方式

实现列表的,有三种常见的方式:

  1. table:宽度自适应,或者简单的宽度控制
  2. ul-li:用浮动和百分比
  3. ul-li:用弹性盒子

今天纠结的小点:

  1. 如果要行可点击时,排除 table,用 ul。
  2. 如果有页签切换,直接用 table 不可行:如果宽度纯自适应,那切换时列表看起来会抖,体验不好
  3. 宽度的分配问题:百分比不好设置,尤其移动端屏幕宽度不定。有时窄屏下刚刚好的比例到宽屏下就有些空荡不协调了;宽屏下合适的比例在窄屏下又被挤的掉下去了-这个很严重的。

先说说这三种布局的特点:

table

1.没有行点击的,可用
2.没有页签切换的,可用:要保证tab切换时视觉上的不抖动,就得设置百分比。
3.列中有换行,同行要保持垂直对齐的
总之:横竖的对齐+内容的自适应+行不会掉下来,这三点就让原生的 table 天生棒棒哒。
但是一旦要加额外限制,table 就显得有点重了。额外限制包括:行可点击-不能实现;不同即有宽度-又有样式限制限制-html层次就深了。

float 加 %

兼容性挺好:各种浏览器都支持,而且表现也较一致
问题1:移动端宽度设置不好设置—原因如今天纠结的3—你看,这个时候table就比较好了-原生的对齐就很协调
问题2:一个宽度要改,其余的比例也都要适当地重新计算再修改,不方便。
问题3:多行时,列的对齐又不好控制-当列的宽度不是定死的时候。灵活就会导致潜在的不对齐。

inline-block 和 nowrap 呢?试试,应该可以。即有百分比,又不会掉下去。

弹性盒子

弹性盒子:比例简单灵活、且行不掉。不得不说,移动端弹性盒子确实挺好的
好处1:比例改动起来很方便-定个比例or固定宽度,比例就直接自适应了,而不用算来算去。
好处2:代码写起来看起来也比table轻便,且后续改动样式很灵活

结果却发现,在移动端,弹性盒子的兼容性也挺多。且之前没问题的,现在也有问题了…你大爷
问题1:弹性盒子失效,子必须设置block 【css会很奇怪有没有,为什么要block呢…之前也没那规矩-敏敏说越是移动端越是新版的浏览器弹性盒子的问题越多】
问题2:弹性盒子,每行的比例竟然不一样 【连列都不对齐了,你还是我之前认识的弹性盒子吗?】

小结

于是,我最后选定了:ul + float + 百分比
因为要行可点击,因为弹性盒子的坑我实在没精气神去查去填了。

最后发现了个问题:设置了百分比后,当窄屏时行会掉下去。因为,列自己里面有设置了 padding-left 和 padding-right
解决:border-box 【不过,在移动端还用这个盒模型,总感觉是退步。呵呵哒。— 不过吧,有时候我觉得人家ie的盒模型挺符合现实的】

如何选型

你看,上面YY了那么多,结论却是:布局整齐的,有时不灵活;太灵活的,又是高风险(兼容性和ui自适应性)。A面B面S面自己都说了。这结论,胜似无结论啊。
好吧,还是得下点结论的。编码之前,先问自己几个问题:

  1. 整行要可点击吗?若要,那就果断抛弃 table,用 ui。
  2. 列表数据量可控吗?若不可控,果断 table。它的天生横竖对齐,真的挺好的。
  3. 有页签切换吗?若没有,那就 table吧,一个 table 内容会自适应的很好。
    若有页签,那给 table 设置 width 方便控制吗?方便的话,那就果断 table。
    若有页签,且宽度不好定。。。连 table 宽度比例都不好定了,你用 ui(不论是浮动百分比还是弹性盒子)效果能更好么?

写到这吧,却发现,在宽度的布局上,他们之间其实都彼此差不多。原来。。。自己今天来来回回反反复复倒腾的那几个问题,结论其实如此明显-那自己当时怎么那么混沌呢?至于为什么会那样,是无从考证了,但唯一可以肯定的就是:今天纯纯的是只用手敲代码了,而丝毫没经过大脑。

我的故事讲完了,最后的浓缩竟然是:气愤忧伤的开始,伤感悲催的结局。这。。。
速速回家好好睡觉晚上给脑子充值去。明天,我要一个美好、清晰、哈皮的开始!!!!!!!!!!!!

文章目录
  1. 1. 列表的三种布局方式
    1. 1.1. table
    2. 1.2. float 加 %
    3. 1.3. 弹性盒子
    4. 1.4. 小结
  2. 2. 如何选型