相对于彼此垂直偏移的列排列元素 [英] Arrange elements in columns vertically shifted relative to one another

问题描述

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

在移动版式上，元素在列中一个在另一个的下面：

但是，在桌面版式上，元素放置在两列中，在一列中包含奇数元素，另一列中包含偶数元素。列相对于彼此垂直移位：

<我想知道是否有一种仅CSS的方式来实现这种定位。如果只有一种说法，例如 nth-child（n + 1）可以跨越第1行和第2行，而`nth -child（2n）将跨越第2行和第3行，依此类推，但是我不确定CSS网格是否可以做到这一点。您也许知道执行此操作的方法吗？

已更新：我想这是我所想到的非常近似的CSS近似值，使用内联代码块： https://codepen.io/anon/pen/JwXVox 。我欢迎更好的技术。

解决方案

大概，您知道如何制作移动版本以及如何使用 @media 来区分不同的屏幕尺寸。

我不完全理解跨行1和2的含义，但您不必使用网格布局。好的老式嵌入式块在这里可以正常工作。您的粗略估算是粗略的，仅是因为您的余量值是粗略估算的，而不是因为您使用的技术不足以完成您想要的操作。

这就是我放置 .grid-element 元素的位置（对我来说看起来很漂亮；也许它足够接近您想要的微调）：

1. 所有元素：上边距为0，左/右边距为1％，底边距为10px。


2. 第二个元素（右列中的第一个元素）：顶边距为50px。


3. 所有奇数-编号的元素（第一个元素除外）：-50px的上边距。

您可以尝试使用不同的边距值来查看它们的效果有。但基本上，一旦将它们并排设置，就将第二个向下颠倒。这样可以正确定位第二个和第一个元素，但随后的所有元素也会被撞倒。因此，我们希望将负数的偶数备份增加。但是，我们不想提高第一个，因为它从未被降低。因此，我们使用 nth-child（2n + 3）（即，每个第二个元素都以三个开头的元素）选择器将其排除。这等效于使用 nth-child（odd）：not（：first-child）。

  function fillGrid（）{const container = document.querySelector（'。container '）; const times = [... new Array（10）]; times.forEach（（）= >> {const element = document.createElement（'div'）; element.classList.add（'grid-element'）; container.appendChild（element）;}）;} fillGrid（） 

  .container {width：60％;保证金：自动；背景：木瓜padding-bottom：60px;}。grid-element {display：inline-block;高度：50px；背景：绿色；垂直对齐：中间；宽度：48％; margin：0 1％10px;}。grid-element：nth-​​child（2）{margin-top：60px;}。grid-element：nth-​​child（2n + 3）{margin-top：-60px;}  

 < div class = container>< / div>  

编辑：使用CSS网格获取相同的结果

在评论中我们进行了交谈之后，我尝试使用 position：grid 进行查看如果我能找到解决方法。我必须添加一行javascript（或编写一堆相当繁琐的CSS）来完成它，但是似乎可以解决。

我只是将行高度设置为25％，然后在您的javascript中添加一行，以使每行两行变粗，并从

  function fillGrid（）{const container = document.querySelector（ '。容器'）; const times = [... new Array（10）]; times.forEach（（e，index）=> {const element = document.createElement（'div'）; element.classList.add（'grid-element'）; //添加以下行以调整元素的大小和位置element.setAttribute（ style， grid-row-start： +（index + 1）+; grid-row-end： +（index + 3）+;）; element.textContent = index + 1; //还在每个盒子中都放一个数字。appendChild（element）;}）;} fillGrid（） 

  .container {display：grid; grid-gap：5px; grid-template-columns：repeat（2，1fr）; grid-auto-rows：25px;宽度：60％;保证金：自动；背景：番木瓜；}。grid-element {背景：绿色；颜色：白色；}  

 < div class = container >< / div>  

I am looking for a way to achieve this effect:

On the mobile layout, elements are placed one under the other in a column:

On the desktop layout, however, elements are placed in two columns, with odd elements in one column and even elements in the other. The columns are shifted vertically relative to one another:

I wonder whether there is a CSS-only way to achieve this positioning. CSS grid comes tantalizingly close, if only there were a way to say that, for example, nth-child(n+1) would span rows 1 and 2, and `nth-child(2n) would span rows 2 and 3, and so on, but I am not sure whether CSS grid can do this. Do you perhaps know of a way to do this?

UPDATED: I guess this is a very rough CSS approximation of what I have in mind, using inline blocks: https://codepen.io/anon/pen/JwXVox. I would welcome a better technique.

解决方案

Presumably, you know how to do your mobile version, and how to use @media to distinguish between different screen sizes.

I didn't fully understand what you meant by "span rows 1 and 2," but you don't have to use a grid layout. Good old-fashioned inline-blocks work fine here. Your rough approximation is rough only because your margin values are roughly estimated, not because the technique you're using is insufficient to do what you want.

Here's what I did to position the .grid-element elements (and it looks pretty even to me; perhaps it's close enough to what you want for you to fine tune it):

1. All elements: top margin of 0, left/right margins of 1%, bottom margin of 10px.
2. Second element (first element in right-hand column): top margin of 50px.
3. All odd-numbered elements except the first one: top margin of -50px.

You can experiment with the different margin values to see the effect that they have. But basically, once you have them set up side by side, you bump the second one down. That positions the second and first elements correctly, but all the subsequent elements get bumped down as well. So, we want to bump the even-numbered ones back up with a negative margin value. However, we don't want to bump the first one up, since it never got bumped down. So, we exclude it with the nth-child(2n+3) (i.e. every second element starting with three) selector. This is the equivalent of using nth-child(odd):not(:first-child).

function fillGrid() {
  const container = document.querySelector('.container');
  const times = [...new Array(10)];
  times.forEach(() => {
    const element = document.createElement('div');
    element.classList.add('grid-element');
    container.appendChild(element);
  });
}

fillGrid()

.container {
  width: 60%;
  margin: auto;
  background: papayawhip;
  padding-bottom: 60px;
}

.grid-element {
  display: inline-block;
  height: 50px;
  background: green;
  vertical-align: middle;
  width: 48%;
  margin: 0 1% 10px;
}

.grid-element:nth-child(2) {
  margin-top: 60px;
}

.grid-element:nth-child(2n+3) {
  margin-top: -60px;
}

<div class="container">
</div>

EDIT: Using the CSS grid to get the same result

After our conversation in the comments, I experimented with position:grid to see if I could figure out a way to do it. I had to add a line of javascript (or write a rather cumbersome bunch of CSS) to get it done, but it seems to work out.

I just set the row-height to 25%, and then added a line in your javascript to make each row two lines thick, and start it one line down from the previous element.

function fillGrid() {
  const container = document.querySelector('.container');
  const times = [...new Array(10)];
  times.forEach((e, index) => {
    const element = document.createElement('div');
    element.classList.add('grid-element');
    //added the line below to size and position the elements
    element.setAttribute("style", "grid-row-start: " + (index + 1) + "; grid-row-end: " + (index + 3) + ";");
    element.textContent = index + 1; //also put a number in each box
    container.appendChild(element);
  });
}

fillGrid()

.container {
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 25px;
  width: 60%;
  margin: auto;
  background: papayawhip;
}

.grid-element {
  background: green;
  color: white;
}

<div class="container">
</div>

这篇关于相对于彼此垂直偏移的列排列元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！