这个问题我已经有一段时间了，但我不确定我应该如何表达。如果我的标题含糊不清/描述性不够，我提前道歉。
我正在尝试创建一个页面，它的宽度为三列，中心列的左右 div 之间的间距是固定的。
我正在寻找类似于下图的行为，其中在左上 Angular 添加一个新 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] |
| |
我最好的想法是添加间距 div，不幸的是这会导致边距问题。由于间距 div 刚刚被插入。
|[div] [div] [div]| |[new] [div] [div]|
|[div] [div] [div]| | [div] [div] |
|[div] [div] [div]| | [div] [div] |
我试图做一些 css，其中右侧边距会吸收间距 div，但我无法做任何事情。
我感谢任何形式的反馈。如果我的问题不清楚，请随时询问更多信息。
( https://jsfiddle.net/871tw4e7/ )
最佳答案
我通过使用 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 有一些问题，因为我没有考虑到当添加 anchor 标记时，它将 div 作为子容器替换为父容器。
关于html - 具有 3 列和 x 行和 div 添加兼容性的基于浮点的设计，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31450868/