如何解决根据屏幕宽度和中心偏移量在左侧填充屏幕宽度上制作 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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。