column 属性的理想与现实-演道网

本网站用的阿里云ECS,推荐大家用。自己搞个学习研究也不错

题图来自网络

最近一段时间事情特别多,陆陆续续地,上周洗完澡躺在床上的时候突然想到了一个事情,最近面试的时候,聊的都是一些基础的东西,我也没准备什么面试题,记得以前被面试或者面试别人的时候,面试题中都会有一道跟布局有关的题目。结果脑袋中不知道哪根神经不对,想到了这样的一个布局:

这个布局无非就是两列、三列还有一个通栏的一列排列,如果用最简洁的 HTML 结构应该怎么写呢?不过不考虑结构问题的话,又能想到什么布局方式呢。今天在水群里临时想到这个,顺带提了一下自己的想法:

  • table

  • float

  • position

  • inline-block

  • grid

  • column

临时想到的方法主要是通过这几个来改变吧,看到最后自己提到的 column 这个属性的时候,想到自己很早之前折腾的一个东西 http://lab.tianyizone.com/column.html ,当时只是为了体验一下 column 几个相关属性的感觉,现在回头一看,这个布局或许可能应该也行吧。

结果还是挺失望的,这个结构我是 .wrap>.box_$*9emmet 写法),结果很失望啊,如果是三列的布局,那么当其中有一行是两列的时候,第三列要么是第二列延伸过去的,要么就是空出来的。

不过感觉这个似乎可以做“两列等高”……

column 中有一个属性是 column-span,主要是控制跨列的数量,但是这个属性的值让我很无语。

在 w3cshool 这个网站上,看到有两个属性值,1all,然而我在 chrome 中测试,我只能用 all 或者 none,深深滴暗伤啊。

还是翻一下 w3c 官方的文档吧,搜了一下,看到了有这么几个属性值,然后看了一下其中一个示例,顿时觉得或许应该还有希望啊。

这里的 column-span 可以用一个整数来作为属性值,这样多好啊。但是一个不小心看到地址栏中的 URL 是:https://www.w3.org/TR/2001/WD-css3-multicol-20010118/#column-span,于是我默默的把页面拉到最上面,点击了 Latest version 的链接地址:https://www.w3.org/TR/css3-multicol/#column-span,一盆冷水下来,什么念想都没有了。

原来还以为可以得瑟一下,结果没办法在水群里得瑟了,看到这个 value 值后,我还能想什么呢,唉!

算了,这个 column 既然无法满足我最初的想法就不管了,不过如果在没有跨列的情况下,或许可以玩一下多列等高。^o^

闲扯CSS的那些事儿,没啥事儿就谈谈CSS

不深入,只扯淡

扯点自己想说的,或许也是你想听的,没有高深的东西,但应该不是平庸的……

转载自演道,想查看更及时的互联网产品技术热点文章请点击http://go2live.cn

未经允许不得转载:演道网 » column 属性的理想与现实-演道网

赞 (0)
分享到:更多 ()

评论 0

评论前必须登录!

登陆 注册