先看需求:假如我页面有四个按钮,每行展示两个,两个元素各站父级元素宽度的50%,听着很简单对吧?如果再加上一条需求:一行超出两个(n个呢)元素则自动换行,换行后的规则保持一致。类似下面截图所示:
将其中一个元素display: none后则变成下面这样:
再依次隐藏呢:
差不多就是这样的效果,我直接贴代码吧:
html结构:
Emmet: div.container>div.item*4
css:
核心css代码就这么几行~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~~~~~~~~~~~~~~~~~~~剩下的自由发挥吧~~~~~~~~~~~~~~~~
其中 item 可以定制min-width和max-width 来实现n个元素自动换行问题。
完~~~