理解HTML默认布局流
在html中，块级元素（如div, p, table, form等）默认会占据其父容器的整个宽度，并在垂直方向上堆叠显示，即每个块级元素都会从新的一行开始。这就是所谓的“正常文档流”。当我们需要将多个块级元素并排显示时，就需要借助css布局技术来改变这种默认行为。
现代CSS布局技术
为了实现元素的横向排列，CSS提供了多种强大的布局机制。
Flexbox：弹性盒布局
Flexbox（弹性盒布局）是一种一维布局模型，专门用于在容器中沿着单个轴（水平或垂直）排列项目。它是实现内容并排显示最常用且最灵活的现代方法之一。
核心原理： 通过将父容器的display属性设置为flex或inline-flex，其直接子元素将成为弹性项目，并可以根据Flexbox属性进行排列、对齐和分配空间。
示例：
<div class="flex-container">
<div class="left-content">表格或表单</div>
<div class="right-content">图片和另一个表单</div>
</div>.flex-container {
display: flex; /* 启用Flexbox布局 */
justify-content: space-between; /* 子元素之间均匀分布空间 */
align-items: flex-start; /* 子元素顶部对齐 */
}
.left-content {
flex: 1; /* 占据可用空间的比例 */
margin-right: 20px;
}
.right-content {
flex: 1; /* 占据可用空间的比例 */
}CSS Grid：网格布局
CSS Grid（网格布局）是一种二维布局模型，允许开发者同时控制行和列的布局。对于需要精确控制行和列的复杂布局，Grid是比Flexbox更强大的选择。
立即学习“前端免费学习笔记（深入）”；
核心原理： 通过将父容器的display属性设置为grid或inline-grid，可以定义网格的行和列，并将子元素放置在网格的特定单元格中。
示例：
<div class="grid-container">
<div class="grid-item table-area">表格内容</div>
<div class="grid-item images-form-area">图片和表单内容</div>
</div>.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 定义两列，每列占据等宽空间 */
gap: 20px; /* 列间距 */
}float属性：浮动布局（传统方法）
float属性是早期实现多列布局的常用方法。通过将元素设置为浮动，它会脱离正常文档流并向左或向右浮动，直到碰到父容器的边缘或另一个浮动元素。
核心原理：float: left; 或 float: right; 使元素浮动。需要使用clear属性来清除浮动，以避免布局混乱。
示例：
<div class="container">
<div class="float-left-item">表格内容</div>
<div class="float-right-item">图片和表单内容</div>
<div style="clear: both;"></div> <!-- 清除浮动 -->
</div>.float-left-item {
float: left;
width: 48%; /* 占据父容器宽度的一部分 */
}
.float-right-item {
float: right;
width: 48%;
}注意事项： float布局在处理响应式和复杂布局时不如Flexbox和Grid灵活，且容易产生浮动清除问题。
position: absolute：绝对定位（特定场景）
position: absolute; 可以将元素从正常文档流中完全移除，并相对于其最近的已定位祖先元素（position属性不为static的元素）进行定位。
核心原理： 元素通过top, right, bottom, left属性进行精确位置控制。
示例：
<div style="position: relative;"> <!-- 父容器设置为相对定位 -->
<div style="width: 50%;">表格内容</div>
<div style="position: absolute; top: 0; right: 0; width: 45%;">图片和表单内容</div>
</div>注意事项： 绝对定位的元素不占据空间，可能导致内容重叠。它通常用于创建悬浮、叠加效果，或将元素精确放置在特定位置，而不是用于常规的并排布局，因为它对响应式设计不够友好且难以维护。
结合Bootstrap栅格系统实现横向布局
鉴于您在Django项目中已经使用了Bootstrap，最推荐和最便捷的解决方案是利用Bootstrap强大的栅格系统。Bootstrap的栅格系统基于Flexbox，能够轻松实现响应式的多列布局。
原理与优势
Bootstrap栅格系统将页面宽度划分为12个虚拟列。通过使用row和col-*系列类，您可以指定元素在不同屏幕尺寸下占据的列数，从而实现灵活的横向布局。
- container / container-fluid: 定义页面内容的宽度。
- row: 必须是container或container-fluid的直接子元素，用于创建水平的列组。row本身使用了display: flex;。
- *`col-**:row的直接子元素，用于定义列的宽度。例如，col-md-6`表示在中等及以上屏幕尺寸上占据6列（即50%宽度）。
实践示例：表格与右侧内容并排
我们将您的现有HTML代码整合到Bootstrap栅格系统中，实现表格与图片、第二个表单的并排显示。
{% extends 'login/basic.html' %}
{% block title %}Approval of count{% endblock title %}
{% block body %}
<!-- 顶部表单 (Form 1) -->
<div class="container my-5">
<form action="/approval" method="post">{% csrf_token %}
<div class="row g-2 mb-4"> {# mb-4 为底部外边距，与下方内容分隔 #}
<div class="col-md">
<div class="form-floating">
<input type="date" class="form-control" id="floatingInputGrid" name="date">
<label for="floatingInputGrid">Shift Date</label>
</div>
</div>
<div class="col-md">
<div class="form-floating">
<select name="serverName" class="form-select" id="floatingSelectGrid">
<option selected>Server Name</option>
{% for server in serverLst %}
<option value="{{server}}">{{server}}</option>
{% endfor %}
</select>
<label for="floatingSelectGrid">Select your server</label>
</div>
</div>
<div class="col-md">
<div class="form-floating d-grid"> {# d-grid 使按钮占据整个列宽 #}
<button type="submit" class="btn btn-primary" id="floatingInputGrid">Submit</button>
</div>
</div>
</div>
</form>
<!-- 表格与右侧内容并排显示区域 -->
<div class="row">
<!-- 左侧：表格 -->
<div class="col-md-8"> {# 表格占据8列，例如总宽度的2/3 #}
<h4 class="mb-3">数据汇总表格</h4>
<table class="table table-bordered table-striped"> {# 增加Bootstrap表格样式 #}
<thead>
<tr>
<th scope="col">User name</th>
<th scope="col">Starting</th>
<th scope="col">Ending</th>
<th scope="col">Bonus</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
<!-- 右侧：图片和第二个表单 -->
<div class="col-md-4"> {# 图片和表单占据4列，例如总宽度的1/3 #}
<h4 class="mb-3">相关图片与操作</h4>
<div class="mb-4"> {# 图片组 #}
<h5>统计图表</h5>
<img src="https://via.placeholder.com/200x150?text=Image+1" class="img-fluid mb-2" alt="统计图表1">
<img src="https://via.placeholder.com/200x150?text=Image+2" class="img-fluid" alt="统计图表2">
</div>
<!-- 第二个表单 (Form 2) -->
<div class="card p-3"> {# 使用Bootstrap卡片样式包裹表单 #}
<h5 class="card-title">额外操作表单</h5>
<form action="/another_action" method="post">{% csrf_token %}
<div class="mb-3">
<label for="additionalInput" class="form-label">输入项</label>
<input type="text" class="form-control" id="additionalInput" name="additionalInput" placeholder="请输入...">
</div>
<div class="mb-3">
<label for="selectOption" class="form-label">选择项</label>
<select class="form-select" id="selectOption" name="selectOption">
<option selected>请选择...</option>
<option value="option1">选项一</option>
<option value="option2">选项二</option>
</select>
</div>
<button type="submit" class="btn btn-success">执行操作</button>
</form>
</div>
</div>
</div>
</div>
{% endblock %}代码说明：
- 外部容器： 使用div class="container my-5"包裹所有内容，提供居中和垂直外边距。
- 顶部表单： 保持原有的row g-2结构，并添加mb-4（margin-bottom）以与下方内容分隔。
-
并排布局区域：
- 新建一个div class="row"作为表格和右侧内容的父容器。
-
表格部分： 使用div class="col-md-8"，表示在中等及以上屏幕尺寸下，表格将占据12列中的8列宽度。
- 为表格添加了table-bordered和table-striped等Bootstrap类，使其外观更专业。
-
右侧内容部分： 使用div class="col-md-4"，表示在中等及以上屏幕尺寸下，图片和第二个表单将占据12列中的4列宽度。
- 添加了两个占位符图片（https://via.placeholder.com/...），并使用img-fluid类确保图片响应式。
- 第二个表单被包裹在card p-3中，使其具有Bootstrap卡片样式，视觉上更清晰。
- 响应式： col-md-*意味着在小屏幕（<768px）上，这些列将自动堆叠，确保在移动设备上也能良好显示。
注意事项与最佳实践
- 响应式设计： 始终考虑不同屏幕尺寸下的布局表现。Bootstrap栅格系统是实现响应式设计的优秀工具。对于自定义CSS，确保使用媒体查询（@media）来调整样式。
- 语义化HTML： 使用具有实际意义的HTML标签（如header, nav, main, section, article, aside, footer等），而不是一味地使用div。这有助于提高代码的可读性、可维护性和SEO。
- 代码可维护性： 保持HTML结构清晰、CSS代码组织有序。避免过度嵌套，合理使用类名。
- 避免过度使用position: absolute： 对于常规的页面布局，应优先考虑Flexbox、CSS Grid或Bootstrap栅格系统。position: absolute应保留给特定场景，如工具提示、模态框、或需要精确覆盖的元素。
- 测试： 在不同浏览器和设备上测试您的布局，确保兼容性和一致性。
通过以上方法，您可以灵活地在HTML中实现复杂的横向布局，尤其是在使用Bootstrap框架时，能够高效且优雅地将表格、图片和表单等元素并排显示，从而构建出更具专业性和用户友好性的网页界面。
