Css 将屏幕分成两半

如何将屏幕分为两半，例如：以便在每一半中添加自定义元素

示例：蓝色的一面是一张图片，后半部分包含一些随机文本输入

我一直在这样尝试：

<div className={styles.splitScreen}>
        <div className={styles.topPane}>
          {topPane}
        </div>
        <div className={styles.bottomPane}>
          {bottomPane}
        </div>
      </div>

---

但是没有成功。

这听起来像是CSS flexbox的一个很好的用例

---

编辑：如果它们应该并排，请使用

flexDirection:“行”

听起来您需要flexbox或css网格

由于iepur1lla已经给出了flexbox的答案，这里有一个css网格替代方案

.splitScreen {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

如果您想确保topPane和bottomPane始终处于这两个位置，可以将其添加到CSS中：

  .topPane {
    grid-column: 1;
    grid-row: 1;
  }

  .bottomPane {
    grid-column: 2;
    grid-row: 1;
  }

---

它们应该并排还是一个在另一个上面？@ellitt肩并肩如果它们应该挨着一个，你就要做

flex-direction:row

或完全忽略它，因为这是默认设置。谢谢@iepuf1lla，但是有没有办法在第一个div中生成一个图像以适应屏幕的整个高度？

splitScreen: {
    display: 'flex';
    flexDirection: 'row';
},
topPane: {
    width: '50%',
},
bottomPane: {
    width: '50%',
},

.splitScreen {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
}

  .topPane {
    grid-column: 1;
    grid-row: 1;
  }

  .bottomPane {
    grid-column: 2;
    grid-row: 1;
  }