我正在尝试为网站上的内容创建一个阻塞网格,该网格遵循如下所示的模式。它必须完全使用 CSS 配置,而不是 JavaScript!
模式:
| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%
| - -|- - | => 2 x 50%
| - -|- - | => 2 x 50%
| - - - - | => 1 x 100%
我已经计算出 :nth-child(5n+1)
将成功地允许我设置大的全宽 block 的样式,但对于其余部分,它将在 之间交替:odd
和 :even
直到 (5n+1)
下的下一个元素出现。
有没有人对如何按照描述进行标记有任何建议?我将不胜感激。
最佳答案
关于CSS nth-child 自定义模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16647468/