css - ReactJS 将屏幕分成两半

Question

如何将屏幕分成两半，例如:为了在每一半中添加我的自定义元素？

示例:蓝色一侧是图片，后半部分包含一些随机文本输入

我一直在尝试这样:

<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);
  }
}

但没有成功。

Answer 1

这听起来像是 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',。