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 弹性盒

<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',.