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

问题描述

我有一个父 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%)',width: '100%',backgroundColor: 'red',BoxShadow: theme.shadows[18],},

解决方法

我是用 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>

,

您可以使用 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>