Question

我已经有这个问题很长一段时间了，但我不确定我应该怎么说出来。如果我的标题含糊不清/不够描述，我会提前道歉。

我正在尝试创建一个页面，其中三列宽，中间列在左右div之间有固定的间距。

我正在寻找类似于下图的行为，其中在左上角添加了一个新的div，将所有div推到左边，并且还保持与中心列的间距。

|[div] [div] [div]|         |[new] [div] [div]|
|[div] [div] [div]|         |[div] [div] [div]|
|[div] [div] [div]|         |[div] [div] [div]|
|[div] [div] [div]|         |[div] [div] [div]|
|[div]            |         |[div] [div]      |
|                 |

我最好的想法是添加spacer-divs，遗憾的是这会导致边距问题。因为间距div只是被推动了。

|[div] [div] [div]|         |[new] [div] [div]|
|[div] [div] [div]|         | [div] [div]     |
|[div] [div] [div]|         | [div] [div]     |

我试图做一些css，其中右边距会吸收间距div，但我无法得到任何效果。

我感谢任何反馈。如果我的问题不清楚，请随时索取更多信息。

（https://jsfiddle.net/871tw4e7/）

Answer 1

我使用nth-child解决了我的问题。

a:first-child .child, a:nth-child(3n+1) .child{
    margin-left:0;
}
a:nth-child(3n) .child{
    margin-right:0;
}

这允许我从第一个和第四个元素中删除边距，并从每三个元素中删除右边距。

这会创建一个布局，可以在页面顶部添加新的div，并且仍然保留所需的布局。

这是一个显示我正在寻找的结果的小提琴。 download

最初我也遇到了与nth-child有关的问题，因为我没有考虑到当添加锚标签时它将div作为子容器替换为父容器。

基于浮点的设计，具有3列和x行以及div添加兼容性

1 个答案: