本文讲解如何通过 css 控制 html 中动态生成的房间卡片（div）保持固定高度，并将多余空白合理分配到描述与表格之间，而非堆积在底部，从而实现视觉整齐、响应友好的酒店房型展示布局。

本文讲解如何通过 css 控制 html 中动态生成的房间卡片（div）保持固定高度，并将多余空白合理分配到描述与表格之间，而非堆积在底部，从而实现视觉整齐、响应友好的酒店房型展示布局。

在构建酒店预订系统的房型概览页时，一个常见但关键的 UI 问题浮现：每个房间卡片（.col-4）需保持严格一致的高度（如 height: 500px），以确保网格布局规整、视觉节奏统一。然而，由于 roomDescription 字数不一，导致 .top 区域高度浮动，而后续的

高度相对固定——最终多余空间被“挤压”到底部，形成不协调的白色间隙。

直接设置父容器 height: 500px 并不能自动重排内部流式内容；CSS 默认按文档流自上而下渲染，空白会自然累积在最后子元素之后。因此，解决核心在于主动控制 .top 区域的底部留白，将其作为“弹性缓冲区”，使下方表格始终锚定在预定位置。

✅ 推荐方案：为 .top 容器添加 margin-bottom（如 Bootstrap 的 mb-5 或自定义 margin-bottom: 2rem），替代依赖父容器高度硬约束：

<div class="top mb-5"> <!-- ✅ 在此处添加底部外边距 -->
  <h3><?php echo htmlspecialchars($rows["roomName"]); ?></h3>
  <p><?php echo htmlspecialchars($rows["roomDescription"]); ?></p>
</div>

<table class="table table-striped">
  <tbody>
    <tr><td>Soort Kamer:</td><td><?php echo htmlspecialchars($rows["typeOfRoom"]); ?></td></tr>
    <tr><td>WC:</td><td><?php echo htmlspecialchars($rows["toilet"]); ?></td></tr>
    <tr><td>Douche:</td><td><?php echo htmlspecialchars($rows["shower"]); ?></td></tr>
    <tr><td>Wastafel:</td><td><?php echo htmlspecialchars($rows["sink"]); ?></td></tr>
    <tr><td>Prijs:</td><td>€ <?php echo number_format($rows["ppn"], 2, ',', '.'); ?>,-</td></tr>
  </tbody>
</table>

? 关键注意事项：

• 安全输出：务必对所有 PHP 输出变量使用 htmlspecialchars()（示例中已补充），防止 XSS 攻击；价格建议用 number_format() 确保格式统一。
• 避免 height 僵化布局：若未来需适配移动端或响应式断点，建议改用 min-height + Flexbox 布局替代固定 height，例如将 .col-4 设为 display: flex; flex-direction: column;，再对 .top 设置 flex: 1 实现自适应伸缩。
• 语义化增强：

用于展示属性列表虽可行，但非语义最佳实践；可考虑改用定义列表

或 CSS Grid 布局提升可访问性与维护性。

? 总结：统一卡片高度 ≠ 强制截断或隐藏内容，而是通过精准的外边距分配引导视觉流。将空白“前置”到描述区域下方，既保留全部信息完整性，又确保表格位置稳定、整体网格呼吸感自然——这是专业酒店预订界面细节打磨的关键一步。