阅读 92

记工作中遇到一件小事情:用css实现多个元素宽度平分父级且可配置一行最多展示多少个元素。

先看需求:假如我页面有四个按钮,每行展示两个,两个元素各站父级元素宽度的50%,听着很简单对吧?如果再加上一条需求:一行超出两个(n个呢)元素则自动换行,换行后的规则保持一致。类似下面截图所示:


将其中一个元素display: none后则变成下面这样:




再依次隐藏呢:





差不多就是这样的效果,我直接贴代码吧:

html结构:

Emmet:   div.container>div.item*4


css:


    核心css代码就这么几行~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

~~~~~~~~~~~~~~~~~~~~~剩下的自由发挥吧~~~~~~~~~~~~~~~~

其中 item 可以定制min-width和max-width 来实现n个元素自动换行问题。



完~~~



关注下面的标签,发现更多相似文章
评论