如何让双列布局中右侧高度与左侧一致？

双列布局：动态调整右侧高度

在双列布局中，有时需要右侧的高度与左侧保持一致，但仅靠 css 样式难以实现。本文将介绍如何通过修改 html 结构来解决此问题。

问题：

在以下 html 和 css 代码中，右侧的高度无法与左侧保持一致：

<div class="parent">
  <div class="left">
    <p>left content</p>
  </div>
  <div class="right">
    <p>right content</p>
  </div>
</div>

.parent {
  display: flex;
  height: 200px;
  border: solid darkcyan 1px;
}

.left, .right {
  width: 50%;
}

.left {
  background-color: lightblue;
}

.right {
  background-color: lightcoral;
}

解决方案：

为了使右侧高度与左侧一致，需要修改 html 结构，在父容器中添加一个额外的容器：

<div class="parent">
  <div class="box">
    <div class="left">
      <p>left content</p>
    </div>
    <div class="right">
      <p>right content</p>
    </div>
  </div>
</div>

通过创建 box 容器，可以将子元素的高度自由撑开。不需要显式设置 box 的高度，它会自动调整为容纳其内容的高度。因此，右侧的高度现在会动态调整，与左侧匹配。

css 代码保持不变：

.parent {
  display: flex;
  height: 200px;
  border: solid darkcyan 1px;
}

.box {
  display: flex;
  width: 100%;
}

.left, .right {
  width: 50%;
}

.left {
  background-color: lightblue;
}

.right {
  background-color: lightcoral;
}

以上就是如何让双列布局中右侧高度与左侧一致？的详细内容，更多请关注其它相关文章！