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

Question

我遇到这个问题已经有一段时间了，但我不确定该如何表达。如果我的标题vague/not描述性足够，我提前道歉。

我正在尝试创建一个页面，其中有三列宽，中间列的左右间距固定 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]      |
|                 |

我最好的想法是添加 spacing-divs，不幸的是，这会导致页边距出现问题。由于间距 divs 只是被推了。

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

我尝试做一些 css，其中 right-hand 边距会吸收间距 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 到页面顶部，并且仍然保留所需的布局。

这里 fiddle 显示了我正在寻找的结果。 https://jsfiddle.net/9v7h4od5/

最初我对 nth-child 也有一些问题，因为我没有考虑到添加锚标记时它取代了 div 作为父容器的子容器。

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

Float based design with 3 columns and x rows and div addition compatibility

html

css

layout