本文讲解如何通过 css 控制酒店预订页面中房间卡片（div）的固定高度，并将多余空白合理分配到描述与表格之间，而非堆积在底部，确保视觉整齐、布局专业。
本文讲解如何通过 css 控制酒店预订页面中房间卡片（div）的固定高度，并将多余空白合理分配到描述与表格之间，而非堆积在底部，确保视觉整齐、布局专业。
在构建酒店预订页的房间概览区域时，保持所有房间卡片（.col-4）尺寸一致是提升用户体验和界面专业度的关键。虽然你已通过设置 height: 500px 强制统高，但问题在于：当房间描述长度不一时，<p> 元素高度浮动，导致其下方的表格位置不固定，最终多余空间被“挤”到了卡片底部，形成难看的白色空隙。
根本原因在于：容器高度固定，但内部子元素未做弹性空间分配。单纯设高无法智能分配空白——CSS 不会自动把“剩余空间”插在描述与表格之间。解决方案不是压缩内容，而是主动控制 .top 区域的底部留白，从而为后续表格腾出稳定位置。
✅ 推荐做法：为 .top 容器添加下边距（如 margin-bottom），替代依赖自然流式布局。例如，在 HTML 中为每个房间的顶部区块添加 Bootstrap 的 mb-4 工具类（或自定义 CSS）：
<div class="top mb-4"> <h3><?php echo htmlspecialchars($rows["roomName"]); ?></h3> <p><?php echo htmlspecialchars($rows["roomDescription"]); ?></p> </div>
同时，建议优化 CSS，避免 float 布局带来的维护难题，改用更现代、稳健的方案：
.room_container {
display: flex;
flex-wrap: wrap;
gap: 25px; /* 替代 float + margin-right */
}
.col-4 {
width: 230px;
min-height: 500px; /* 改用 min-height 更安全 */
border: 1px solid #654b24;
border-radius: 5px;
padding: 0.5em;
box-sizing: border-box;
}⚠️ 注意事项：
- 务必对 PHP 输出的 $rows 字段使用 htmlspecialchars()，防止 XSS 漏洞；
- 避免直接依赖 height: 500px —— 若未来内容增多（如新增字段），硬高度易导致内容溢出或滚动条；min-height + 合理内边距 + 显式间距控制更可持续；
- 表格（.table-striped）建议替换为语义化 <dl> 或 Flex 布局列表，既精简 HTML，又提升可访问性与样式可控性；
- 如需严格等高（含标题、描述、表格均对齐），可对 .col-4 启用 display: flex; flex-direction: column;，再为 .top 设置 flex: 1，表格设 margin-top: auto 实现底部吸附——这是进阶等分布局方案。
总结：统一卡片高度 ≠ 硬编码 height，而应结合容器约束 + 子元素间距显式声明 + 现代布局模型。一次合理的 margin-bottom 调整，配合语义化结构升级，即可让酒店房间列表既美观又健壮。
