双列布局：动态调整右侧高度
在双列布局中，有时需要右侧的高度与左侧保持一致，但仅靠 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;
}以上就是如何让双列布局中右侧高度与左侧一致？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
639
收藏
