javascript - CSS：在两个垂直的 div 上水平对齐一对 div

问题描述

我遇到了一个特定的设计，我找不到任何完美的解决方案。我的问题如下：

我的页面被垂直分成两半（左面板/右面板，占据整个页面高度），在这些面板中会有成对的 div 始终水平对齐。例如，A 和 A' 必须对齐。即使 div 大小发生变化（参见 B 和 B'，或 C 和 C'），它们也应保持对齐。

我做了很多调整并找到了一些不错的解决方案，最好的解决方案是“伪造”左右面板，使用单个 div 代替渐变背景分成两半。但问题是我需要干净的 div 架构，否则以后我将无法执行诸如“当您单击左侧面板时，发生 xxxx”或“通过阻止禁用右侧面板”之类的操作它的所有输入'等。

我也玩过表格，但是我的水平 div 动态显示（起初左/右面板是空的），我无法强制表格使用整个页面高度，而前几个单元格会异常大以填充他们父母的全高。

我的问题有什么干净的解决方案吗？它有帮助，我正在使用 Material-ui 和 React。

非常感谢！

标签： javascripthtmlcss

这是你如何做到的一个例子

* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.column {
  flex: 0 0 50%;
  padding: 10px;
}

.column-1 {
  background-color: rgba(255, 0,  0, 0.6);
}

.column-2 {
  background-color: rgba(0, 0, 255, 0.6);
}

.column-content {
  background-color: red;
  padding: 10px;
}

<div class="container">
  <div class="column column-1">
    <div class="column-content">
      content with<br>
      multiple lines
    </div>
  </div>
  <div class="column column-2">
    <div class="column-content">
      content with one line
    </div>
  </div>
  <div class="column column-1">
    <div class="column-content">
      content with one line
    </div>
  </div>
  <div class="column column-2">
    <div class="column-content">
      content with<br>
      multiple lines
    </div>
  </div>
</div>

javascript - CSS：在两个垂直的 div 上水平对齐一对 div

问题描述

解决方案

推荐阅读