小编Naf*_*ets的帖子

在下面的stackblitz 示例中，您可以看到上面的“Toppings”占位符；当用户从下拉列表中选择任何项目时，“Toppings”文本会变小并移动到选择上方。

当用户选择任何内容时，有什么方法可以删除上面的配料文本或显示空字符串而不是它？

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

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

我一直在尝试这样：

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

但没有成功。