CSS Flex 布局：实现左右等高布局
在使用 CSS Flex 布局时，常需将页面分割成上下两部分，下半部分又细分为左右两列。 如何确保左右两列高度一致，并添加贯穿始终的分割线？本文提供两种方案。
方案一：基于现有结构，使用 Jav...
在使用 CSS Flex 布局时，常需将页面分割成上下两部分，下半部分又细分为左右两列。 如何确保左右两列高度一致，并添加贯穿始终的分割线？本文提供两种方案。
方案一：基于现有结构，使用 JavaScript 动态调整高度假设已存在 .lft 和 .rht 两个容器，可以使用 JavaScript 动态获取 .rht 的高度，并应用到 .lft 上。这种方法简单直接，但依赖 JavaScript，且效率可能较低。
首先，为 .rht 设置 height: min-content;，使其高度由内容撑开。然后，使用 JavaScript 代码：
PHP
let h = $(".rht").height() + 'px';
$(".lft").css({ height: h });此代码片段获取 .rht 的高度，并将其应用到 .lft。
方案二：优化 HTML 结构，利用 CSS Flex 实现等高为了避免 JavaScript 的依赖，并提升效率，建议优化 HTML 结构，并利用 CSS Flex 的特性来实现等高布局。
示例 HTML 结构：
PHP
<div class="wrapper">
<div class="top">导航栏</div> <!-- 顶部导航 -->
<div class="content">
<div class="lft">左侧内容</div>
<div class="rht">右侧内容</div>
</div>
</div>对应的 CSS 代码：
PHP
.wrapper {
display: flex;
flex-direction: column; /* 垂直布局 */
height: 100vh; /* 占据整个视口高度 */
}
.top {
height: 100px; /* 顶部导航高度 */
width: 100%;
background-color: #e3e3e3;
}
.content {
display: flex;
flex: 1; /* 占据剩余空间 */
}
.lft {
flex: 1; /* 占据剩余空间 */
}
.rht {
width: 600px;
flex-shrink: 0; /* 防止右侧内容压缩 */
border-left: 1px solid red; /* 分割线 */
}这种方法中，wrapper 使用 flex 布局，content 容器也使用 flex 布局，并通过 flex: 1; 确保左右两列共享剩余空间，从而达到等高效果。 flex-shrink: 0; 防止 .rht 被压缩。
通过以上两种方法，可以有效解决 CSS Flex 布局中左右两列高度不一致的问题，并实现简洁美观的页面布局。 建议优先考虑方案二，因为它更简洁、高效且不依赖 JavaScript。
以上就是如何使用 CSS Flex 实现左右布局并保持相同高度？的详细内容，更多请关注知识资源分享宝库其它相关文章！
版权声明
本站内容来源于互联网搬运，
仅限用于小范围内传播学习，请在下载后24小时内删除，
如果有侵权内容、不妥之处，请第一时间联系我们删除。敬请谅解!
E-mail：dpw1001@163.com
发表评论