如何将屏幕分成两半,例如:为了在每一半中添加我的自定义元素?
示例:蓝色一侧是图片,后半部分包含一些随机文本输入
我一直在尝试这样:
<div className={styles.splitScreen}>
<div className={styles.topPane}>
{topPane}
</div>
<div className={styles.bottomPane}>
{bottomPane}
</div>
</div>
使用包含以下内容的 scss 文件:
.splitScreen {
position: relative;
height: 100vh;
.topPane,
.bottomPane {
position: relative;
width: 100%;
height: 50%;
}
.topPane {
transform: rotate(180deg);
}
}
但没有成功。
最佳答案
这听起来像是 CSS flexbox 的一个很好的用例。 CSS FLEXBOX
<div className={styles.splitScreen}>
<div className={styles.topPane}>{topPane}</div>
<div className={styles.bottomPane}>{bottomPane}</div>
</div>
样式对象:
splitScreen: {
display: 'flex';
flexDirection: 'row';
},
topPane: {
width: '50%',
},
bottomPane: {
width: '50%',
},
编辑:如果它们应该并排,请使用 flexDirection: 'row',
。
关于css - ReactJS 将屏幕分成两半,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61088000/