Css 在相对于彼此垂直移动的列中排列元素

我正在寻找一种实现这种效果的方法：

在移动布局上，元素在列中一个接一个地放置：

但是，在桌面布局中，元素被放置在两列中，一列中有奇数元素，另一列中有偶数元素。这些列相对彼此垂直移动：

我想知道是否有一个CSS唯一的方法来实现这一定位。CSS网格非常接近，如果有一种方法可以说，例如，第n个childn+1将跨越第1行和第2行，`n-child2n将跨越第2行和第3行，依此类推，但我不确定CSS网格是否可以做到这一点。你可能知道这样做的方法吗

---

更新：我想这是一个非常粗略的CSS近似我所想的，使用内联块：。我希望有更好的技术。

大概你知道如何制作手机版本，以及如何使用@media来区分不同的屏幕大小

我不完全理解您所说的跨行1和2是什么意思，但您不必使用网格布局。好的老式内联块在这里工作得很好。您的粗略近似值是粗略的，只是因为您的边距值是粗略估计的，而不是因为您使用的技术不足以满足您的需要

下面是我定位.grid元素所做的工作，在我看来，它看起来相当不错；也许它与您想要的足够接近，您可以对其进行微调：

所有元素：上边缘为0，左/右边缘为1%，下边缘为10px。 第二个元素右栏中的第一个元素：50px的上边距。 除第一个元素外的所有奇数元素：顶部边距为-50px。 您可以使用不同的边距值进行实验，以查看它们的效果。但基本上，一旦你把它们并排设置好，你就会把第二个撞倒。这将正确定位第二个和第一个元素，但所有后续元素也会被撞倒。所以，我们想用一个负的边距值来替换偶数的。然而，我们不想撞上第一个，因为它从来没有被撞倒过。因此，我们用第n-child2n+3排除它，也就是说，每第二个元素从三个选择器开始。这相当于使用第n个child奇数：非：第一个孩子

函数填充网格{ const container=document.querySelector'.container'； 常数时间=[…新阵列10]； times.forEach=>{ 常量元素=document.createElement'div'； element.classList.add'grid-element'； container.appendChildelement； }; } 填充网格 .集装箱{ 宽度：60%； 保证金：自动； 背景：番木瓜； 填充底部：60px； } .网格元素{ 显示：内联块； 高度：50px； 背景：绿色； 垂直对齐：中间对齐； 宽度：48%； 利润率：0.1%10px； } .网格元素：n-child2{ 边缘顶部：60像素； } .网格元素：n-child2n+3{ 利润上限：-60px； }

---

想必，您知道如何制作手机版本，以及如何使用@media来区分不同的屏幕大小

我不完全理解您所说的跨行1和2是什么意思，但您不必使用网格布局。好的老式内联块在这里工作得很好。您的粗略近似值是粗略的，只是因为您的边距值是粗略估计的，而不是因为您使用的技术不足以满足您的需要

下面是我定位.grid元素所做的工作，在我看来，它看起来相当不错；也许它与您想要的足够接近，您可以对其进行微调：

所有元素：上边缘为0，左/右边缘为1%，下边缘为10px。 第二个元素右栏中的第一个元素：50px的上边距。 除第一个元素外的所有奇数元素：顶部边距为-50px。 您可以使用不同的边距值进行实验，以查看它们的效果。但基本上，一旦你把它们并排设置好，你就会把第二个撞倒。这将正确定位第二个和第一个元素，但所有后续元素也会被撞倒。所以，我们想用一个负的边距值来替换偶数的。然而，我们不想撞上第一个，因为它从来没有被撞倒过。因此，我们用第n-child2n+3排除它，也就是说，每第二个元素从三个选择器开始。这相当于使用第n个child奇数：非：第一个孩子

函数填充网格{ const container=document.querySelector'.container'； 常数时间=[…新阵列10]； times.forEach=>{ 常量元素=document.createElement'div'； element.classList.add'grid-element'； container.appendChildelement； }; } 填充网格 .集装箱{ 宽度：60%； 保证金：自动； 背景：番木瓜； 填充底部：60px； } .网格元素{ 显示：内联块； 高度：50px； 背景：绿色； 垂直对齐：中间对齐； 宽度：48%； 利润率：0.1%10px； } .网格元素：n-child2{ 边缘顶部：60像素； } .网格元素：n-child2n+3 { 利润上限：-60px； } 您可以使用Flexbox、calc函数、：n个子选择器、：not伪类，当然还有@media querys:

.flex{ 显示：flex；/*以内联方式显示flex项*/ 柔性包裹：包裹；/*启用其包裹*/ } .flex>div{ 弹性基准：calc50%-10px；/*初始宽度设置为父级宽度的50%-左右边距*/ 高度：100px； 边距：0 5px；/*最好将顶部和底部边距设置为零，以简化计算*/ 边框：1px实心； 框大小：边框框；/*由于边框的原因，一般也建议使用*/ } .flex>div:nth-child2{ 边距顶部：55px；/*分区高度的一半+它们之间所需间隙的一半；修改影响除第一个分区以外的所有分区*/ } .flex>div:n个孩子奇数：非：第一个孩子{ 页边距顶部：-45px；/*-div高度的一半+它们之间所需间隙的一半，因此在这种情况下，间隙为10px 2 x 5px；如果ofc修改成功，修改将影响除第一个奇数div以外的所有div*/ } .flex>div:nth-child偶数：not:nth-child2{ 页边距顶部：10px；/*间隙大小；修改影响除前三个div以外的所有div*/ } @介质最大宽度：600px{ .flex{flex direction:column}/*垂直堆叠flex项*/ .flex>div{flex basis:auto}/*初始宽度设置为默认值或100%*/ .flex>div:not:first child{margin top:10px！important} } 1. 2. 3. 4. 5. 6. 7. 8. 您可以使用Flexbox、calc函数、：n个子选择器、：not伪类，当然还有@media querys:

.flex{ 显示：flex；/*以内联方式显示flex项*/ 柔性包裹：包裹；/*启用其包裹*/ } .flex>div{ 弹性基准：calc50%-10px；/*初始宽度设置为父级宽度的50%-左右边距*/ 高度：100px； 边距：0 5px；/*最好将顶部和底部边距设置为零，以简化计算*/ 边框：1px实心； 框大小：边框框；/*由于边框的原因，一般也建议使用*/ } .flex>div:nth-child2{ 边距顶部：55px；/*分区高度的一半+它们之间所需间隙的一半；修改影响除第一个分区以外的所有分区*/ } .flex>div:n个孩子奇数：非：第一个孩子{ 页边距顶部：-45px；/*-div高度的一半+它们之间所需间隙的一半，因此在这种情况下，间隙为10px 2 x 5px；如果ofc修改成功，修改将影响除第一个奇数div以外的所有div*/ } .flex>div:nth-child偶数：not:nth-child2{ 页边距顶部：10px；/*间隙大小；修改影响除前三个div以外的所有div*/ } @介质最大宽度：600px{ .flex{flex direction:column}/*垂直堆叠flex项*/ .flex>div{flex basis:auto}/*初始宽度设置为默认值或100%*/ .flex>div:not:first child{margin top:10px！important} } 1. 2. 3. 4. 5. 6. 7. 8. 浮动法

.集装箱{ 宽度：250px； 保证金：0自动； } .项目{ 宽度：100px； 高度：100px； 边框：1px纯黑； 利润上限：calc100px/3； } .项目：第一个孩子{ 边际上限：0； } @媒体最小宽度：400px{ .项目：第n个儿童偶数{ 浮动：对； 保证金顶部：calc-100px/3； } } 浮动法

.集装箱{ 宽度：250px； 保证金：0自动； } .项目{ 宽度：100px； 高度：100px； 边框：1px纯黑； 利润上限：calc100px/3； } .项目：第一个孩子{ 边际上限：0； } @媒体最小宽度：400px{ .项目：第n个儿童偶数{ 浮动：对； 保证金顶部：calc-100px/3； } }

---

非常感谢。至于我所说的跨行1和跨行2等等，这里有一个我想到的示例：。请注意，第二块是如何定位在网格中的，大约是第五块高度的一半。现在，如果有一种方法告诉CSS网格重复这个模式，我想它会为我的问题提供一个更健壮的解决方案。我希望有这样一种方式，但我根本没有意识到。同时，我会尽量同意你的建议。@azangru，我明白了。谢谢你的澄清。我注意到了。也许有更好的方法来使用网格来实现这一点。然而，内联块解决方案是脆弱的，因为您无法轻松更改正在使用的列数。如果您不需要这样做，那么很难确切理解为什么网格提供的灵活性更强大。您能详细说明一下为什么您认为交错内联块解决方案不够健壮吗？我问这个问题是出于兴趣和好奇，不是因为我已经形成了一个观点。@azangru我把它放进了一个网格版本。我使用了一行JS来避免一些重复的CSS，在不单独指定每个元素的情况下，我无法理解如何做我想要的事情。但是，如果您真的想要一个只使用CSS的解决方案，您可以像我最初那样为每个元素添加一个类或id，然后分别指定网格行开始和网格行结束元素。可扩展性不是很强，但是如果您不需要扩展，也不想使用JS来指定它们，您可以这样做。我意识到我忘了提到布局的一个重要细节：

---

要分布在两列之间的图元可以具有不等的高度。这使得基于图元高度假设的解决方案完全不适合这种情况。我为此打开了一个新问题：，希望它不会作为副本关闭。谢谢。至于我所说的跨行1和跨行2等等，这里有一个我想到的示例：。请注意，第二块是如何定位在网格中的，大约是第五块高度的一半。现在，如果有一种方法告诉CSS网格重复这个模式，我想它会为我的问题提供一个更健壮的解决方案。我希望有这样一种方式，但我根本没有意识到。同时，我会尽量同意你的建议。@azangru，我明白了。谢谢你的澄清。我注意到了。也许有更好的方法来使用网格来实现这一点。然而，内联块解决方案是脆弱的，因为您无法轻松更改正在使用的列数。如果您不需要这样做，那么很难确切理解为什么网格提供的灵活性更强大。您能详细说明一下为什么您认为交错内联块解决方案不够健壮吗？我问这个问题是出于兴趣和好奇，不是因为我已经形成了一个观点。@azangru我把它放进了一个网格版本。我使用了一行JS来避免一些重复的CSS，在不单独指定每个元素的情况下，我无法理解如何做我想要的事情。但是，如果您真的想要一个只使用CSS的解决方案，您可以像我最初那样为每个元素添加一个类或id，然后分别指定网格行开始和网格行结束元素。可伸缩性不是很强，但是如果你不需要缩放，也不想使用JS来指定它们，你可以这样做。我意识到我忘了提到布局的一个关键细节：要分布在两列之间的元素可以具有不等的高度。这使得基于图元高度假设的解决方案完全不适合这种情况。我为此提出了一个新的问题：，希望它不会作为复制品被关闭。这类作品。但是，OP想要的是，例如，盒子3的顶部是在盒子2的中间，而不是在盒子底部。等等因此，必须将边距值添加到框2中，然后从除第一个框外的所有奇数框中减去边距值。这就是说，我也使用了grid，并对我的答案进行了编辑，我不确定在这种情况下flex或grid在内联块上有何改进。你有什么想法吗？好的。imho最大的优势是应用CSS的数量，然后是易于修改的ofc。你需要知道一两件关于网格的事情，因为网格非常复杂和广泛，初学者需要一些时间才能真正掌握它的窍门，而且保持最新从来都不是坏事。旁注：给定的内联块解决方案不如后一个“中间”偏差那么精确，但总体而言，我喜欢您的动态方法和解决方案，因此我的观点是+1。Oops。你当然是对的；我没有考虑到10px的利润。我修好了。现在，我看不到任何网格方法可以在不单独指定每个框的情况下使每个框宽两行，这导致了大量繁重的CSS，而且我不想使用边距，这似乎违背了更改为网格的目的。所以我只是用JS来做繁重的CSS。如果您知道一种使用CSS来表示每个元素有两行，而不单独指定它们的方法，我很高兴知道如何使用CSS。这种方法是有效的。但是，OP想要的是，例如，盒子3的顶部是在盒子2的中间，而不是在盒子底部。等等因此，必须将边距值添加到框2中，然后从除第一个框外的所有奇数框中减去边距值。这就是说，我也使用了grid，并对我的答案进行了编辑，我不确定在这种情况下flex或grid在内联块上有何改进。你有什么想法吗？好的。imho最大的优势是应用CSS的数量，然后是易于修改的ofc。你需要知道一两件关于网格的事情，因为网格非常复杂和广泛，初学者需要一些时间才能真正掌握它的窍门，而且保持最新从来都不是坏事。旁注：给定的内联块解决方案不如后一个“中间”偏差那么精确，但总体而言，我喜欢您的动态方法和解决方案，因此我的观点是+1。Oops。你当然是对的；我没有考虑到10px的利润。我修好了。现在，我看不到任何网格方法可以在不单独指定每个框的情况下使每个框宽两行，这导致了大量繁重的CSS，而且我不想使用边距，这似乎违背了更改为网格的目的。所以我只是用JS来做繁重的CSS。如果您知道一种使用CSS来表示每个元素有两行，而不单独指定它们的方法，我会 很高兴知道怎么做。