根据屏幕宽度和到中心的偏移量在左侧填充屏幕宽度上的 div

Question

我有一个父 div，里面有两个孩子，我希望第一个孩子去左边，第二个孩子应该去右边。我的主要问题是他们不能从确切的中间点开始。他们必须从中间开始 -100px 和 +100px。然后，它们应该从该点开始填充屏幕左侧或右侧的剩余宽度，如果调整窗口大小，它仍应保持在中间完全相同的位置减去 X 像素量。

这是我的代码到目前为止的样子：

<div className={classes.backPartDivs}>
  <div />
  <div />
</div>

  backPartDivs: {
    width: '100%',
    position: 'absolute',
    top: 0,
    zIndex: 4,
    left: 0,
    height: 68,
    '& > div': {
      '&:first-child': {
        position: 'absolute',
        left: 'calc(-50vw + 50%)',
        height: 68,
        width: '100%',
        backgroundColor: 'red',
        boxShadow: theme.shadows[18],
      },
    },
  },

Answer 1

我用 css 写的，如果这是你想要的结果，你可以在你的应用中实现它

.parentDiv{
    width: 100%;
    height: 68px;
    background:red;
    display:flex;
    padding:0 100px;
}
.parentDiv div{
width:100%;
height:68px;
margin:0 10px;
background:yellow;
}

<div class="parentDiv">
  <div></div>
  <div></div>
</div>

Answer 2

您可以使用flex 在嵌套的div's 之间创建间隙并添加margin-left: 100px。

一个例子：

.container {
    display: flex;
    outline: 1px solid blue;
}

.container > div:first-of-type {
    width: calc(50% - 50px);
    background-color: orange;
}

/* ----- Flexbox gap: ----- */
.container > * + * {
    margin-left: 100px;
    width: calc(50% - 50px);
    background-color: chocolate;
}

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