javascript - 如何在响应式 div 中缩进由溢出包装引起的每一秒可视行

Question

目前正在研究响应式六边形网格，以与样式化的组件使用react。目前它是一个单独的表格行(或 flexbox - 功能是相同的)在窗口改变时重新定位所有 div - 太棒了!但是每一行都需要有一个 margin-left: 56px;。这需要动态/ react 地发生，因为呈现的六边形数量会不断变化。

我曾尝试查看溢出的 div 到其他 div 的情况 - 这将是一个很好的解决方案，但我找不到实现它的办法。我还尝试研究跟踪六边形的位置，以及它们何时向下移动以增加边距以及何时移动以移除边距 - 但我不知道该怎么做。

import React, { Component } from 'react';
import styled from 'styled-components';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
      <HexRow>
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
        <Hex />
      </HexRow>
      </div>
    );
  }
}

const HexRow = styled.div`
    clear: left;
    margin-bottom: 60px;
    margin-left: 55px;
`

const Hex = styled.div`
  &:before {
    content: " ";
    width: 0; height: 0;
    border-bottom: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
    position: absolute;
    top: -30px;
  }

    width: 104px;
    height: 60px;
    background-color: #6C6;
    position: relative;
    float: left;
    margin-top: 30px;
    margin-bottom: 9px;
    margin-right: 10px;

  &:after {
    content: "";
    width: 0;
    position: absolute;
    bottom: -30px;
    border-top: 30px solid #6C6;
    border-left: 52px solid transparent;
    border-right: 52px solid transparent;
  }
`;

export default App;

What happens now

What needs to happen

感谢任何帮助或指点!

Answer 1

您可以使用 :nth-child(even) CSS 选择器来完成此操作，如下面相当简单的说明...

请注意，您寻找的属性称为 margin-left(而不是 left-margin)。

div p:nth-child(even) {
  margin-left: 56px;
}

<div>
  <p>Hex</p>
  <p>Hex</p>
  <p>Hex</p>
  <p>Hex</p>
  <p>Hex</p>
  <p>Hex</p>
</div>