这个问题我已经有一段时间了,但我不确定我应该如何表达。如果我的标题含糊不清/描述性不够,我提前道歉。

我正在尝试创建一个页面,它的宽度为三列,中心列的左右 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/

10-12 00:13
查看更多