双列布局中左右列高度不一致如何解决？
来源：php
2024-11-03 12:57:53
0浏览
收藏
一分耕耘，一分收获！既然都打开这篇《双列布局中左右列高度不一致如何解决？》，就坚持看下去，学下去吧！本文主要会给大家讲到等等知识点，如果大家对本文有好的建议或者看到有不足之处，非常欢迎大家积极提出！在后续文章我会继续更新文章相关的内容，希望对大家都有所帮助！
双列布局css对齐问题
在双列布局中，遇到左右列高度不一致的问题，如何解决？
示例代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style>
.parent {
display: flex;
height: 200px;
border: solid darkcyan 1px;
overflow-y: auto;
}
.left {
background: lightblue;
height: 300px;
width: 50%;
}
.right {
width: 50%;
background-color: lightcoral;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
</div>
<div class="right"></div>
</div>
</body>
</html>问题：
使用上述代码，无法让右列高度和左列相同。如何设置右列样式，使其高度与左列相等？
回答：
要使右列高度与左列相同，需要在父容器 parent 中新增一个容器 box，并将其作为左右列的直接父元素：
<div class="parent">
<div class="box">
<div class="left"></div>
<div class="right"></div>
</div>
</div>解释：
box 容器的高度会自动撑开，以容纳其子元素的内容。因此，即使未显式设置 box 的高度，左右列的高度也会自动调整为与 left 列相同的高度。
好了，本文到此结束，带大家了解了《双列布局中左右列高度不一致如何解决？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！
版本声明
本文转载于：php 如有侵犯，请联系study_golang@163.com删除
Java 中 wait() 和 sleep() 有什么区别？
- 上一篇
- Java 中 wait() 和 sleep() 有什么区别？
- 下一篇
- 使用jQuery Ajax进行系统登录时如何实现同步执行？
查看更多
最新文章
-
- 文章 · 前端 | 23分钟前 |
- JavaScript日期格式化方法全解析
- 325浏览 收藏
-
- 文章 · 前端 | 29分钟前 |
- HTML5边框定位不占位技巧
- 405浏览 收藏
-
- 文章 · 前端 | 29分钟前 |
- CSSLint优化技巧与样式提升方法
- 413浏览 收藏
-
- 文章 · 前端 | 31分钟前 |
- CSSSticky定位技巧：滚动与固定结合应用
- 293浏览 收藏
-
- 文章 · 前端 | 35分钟前 |
- 统一图标风格，FontAwesome全站应用指南
- 356浏览 收藏
-
- 文章 · 前端 | 40分钟前 |
- JavaScript动态加载模块技巧解析
- 119浏览 收藏
-
- 文章 · 前端 | 45分钟前 |
- LinuxHelix加速技巧与重构指南
- 182浏览 收藏
-
- 文章 · 前端 | 46分钟前 | 顶层await
- 顶层await用法详解与实战技巧
- 288浏览 收藏
-
- 文章 · 前端 | 47分钟前 |
- 表单数据保留与自动清理技巧
- 120浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- EventLoop机制解析与执行顺序控制技巧
- 392浏览 收藏
-
- 文章 · 前端 | 1小时前 |
- Tailwind任意值类解决方法详解
- 321浏览 收藏
-
2. CSS 样式使用 ::after 伪元素来在图片上叠加文字： .im">
