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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《如何让双列布局中右侧高度与左侧一致？》，聊聊，希望可以帮助到正在努力赚钱的你。

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

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

问题：

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

  

    
left content
  
  

    
right content
  

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

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

.left {
  background-color: lightblue;
}

.right {
  background-color: lightcoral;
}

解决方案：

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

  

    

      
left content
    
    

      
right content
    
  

通过创建 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;
}

以上就是《如何让双列布局中右侧高度与左侧一致？》的详细内容，更多关于的资料请关注golang学习网公众号！