理解HTML默认布局行为
在html中，大多数元素（如<div>、<p>、<table>、<form>) 默认是块级元素。块级元素会独占一行，并尽可能占据父容器的全部可用宽度，导致后续元素默认从新的一行开始显示。这就是为什么当您在表格之后添加图片或另一个表单时，它们会出现在表格下方的原因。要实现并排布局，我们需要借助css布局技术来改变元素的默认流向。
使用Bootstrap Grid实现表格与旁侧元素的并排布局
鉴于您在现有代码中已经使用了Bootstrap框架（通过row和col-md等类），最推荐且最便捷的解决方案是继续利用Bootstrap的强大网格系统。Bootstrap Grid提供了一个响应式、移动优先的弹性布局方案，能够轻松实现复杂的页面结构。
核心思想： 将表格和您希望放置在右侧的内容（例如图片和第二个表单）包裹在一个共同的div容器中，并为这个容器应用row类。然后，在这个row内部创建两个列（col-md-*），一个用于表格，另一个用于右侧内容。通过调整col-md-*中的数字，您可以控制它们在不同屏幕尺寸下的相对宽度。
实现步骤：
- 创建主行容器： 在您的表格上方或下方（根据您的整体布局需求），创建一个新的div，并为其添加class="row"。这个row将作为表格和右侧内容的父容器。
- 定义表格列： 在row内部，为您的表格创建一个div，并为其添加适当的Bootstrap列类，例如class="col-md-8"。这将使表格占据中等及以上屏幕尺寸下行的8个网格单位。
- 定义右侧内容列： 紧接着表格列，创建另一个div，并为其添加剩余的列类，例如class="col-md-4"。这个div将用于容纳您希望在表格右侧显示的所有内容（图片、第二个表单等）。
- 放置内容： 将您的现有表格代码放入第一个列div中。将图片和第二个表单的代码放入第二个列div中。
示例代码：
以下是一个修改后的HTML片段，展示了如何使用Bootstrap Grid将表格与右侧的图片和表单并排显示。请注意，为了演示，我添加了占位图片和第二个表单的结构。
立即学习“前端免费学习笔记（深入）”；
{% extends 'login/basic.html' %}
{% block title %}Approval of count{% endblock title %}
{% block body %}
<!-- 顶部表单 (您的现有代码) -->
<form action="/approval" method="post">{% csrf_token %}
<div class="row g-2">
<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">
<button type="submit" class="btn btn-primary mx-5 my-2" id="floatingInputGrid">Submit</button>
</div>
</div>
</div>
</form>
<!-- 新增的行容器，用于并排显示表格和右侧内容 -->
<div class="row mt-4"> <!-- mt-4 为顶部外边距，使内容与上方表单有间距 -->
<!-- 左侧列：放置表格 -->
<div class="col-md-8"> <!-- 表格占据8/12的宽度 -->
<table class="table" style="width:100%"> <!-- 表格宽度调整为100%以适应列宽 -->
<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/12的宽度 -->
<div class="d-flex flex-column align-items-center"> <!-- 使用Flexbox垂直堆叠图片和表单 -->
<h5>相关图片</h5>
<img src="https://via.placeholder.com/150" alt="Placeholder Image 1" class="img-fluid mb-3">
<img src="https://via.placeholder.com/150" alt="Placeholder Image 2" class="img-fluid mb-3">
<h5 class="mt-4">第二个表单</h5>
<form action="/another_action" method="post" class="w-100">{% csrf_token %}
<div class="mb-3">
<label for="inputField1" class="form-label">输入字段 1</label>
<input type="text" class="form-control" id="inputField1" name="field1">
</div>
<div class="mb-3">
<label for="inputField2" class="form-label">输入字段 2</label>
<input type="text" class="form-control" id="inputField2" name="field2">
</div>
<button type="submit" class="btn btn-success w-100">提交表单 2</button>
</form>
</div>
</div>
</div> <!-- 结束 row -->
{% endblock %}代码说明：
- div class="row mt-4"： 创建了一个新的行，mt-4是Bootstrap提供的外边距工具类，增加了顶部外边距，使这部分内容与上面的表单保持一定距离。
- div class="col-md-8"： 这个列用于容纳表格。col-md-8表示在中等（md）及以上屏幕尺寸下，该列将占据父行12个网格单位中的8个。
- div class="col-md-4"： 这个列用于容纳右侧内容（图片和第二个表单）。col-md-4表示在中等（md）及以上屏幕尺寸下，该列将占据父行12个网格单位中的4个。8 + 4 = 12，正好填满一行。
- table style="width:100%"： 将表格的宽度设置为100%，使其能够完全填充其父列（col-md-8）的可用空间。
- d-flex flex-column align-items-center： 在右侧列内部，我使用了Bootstrap的Flexbox工具类。d-flex使其成为一个Flex容器，flex-column使内部项目垂直堆叠，align-items-center使内部项目在交叉轴（这里是水平方向）上居中。
- img-fluid： Bootstrap提供的图片响应式类，确保图片宽度不超过其父容器，并随容器尺寸缩放。
- mb-3，mt-4，w-100： 这些是Bootstrap的间距和宽度工具类，用于控制元素之间的距离和宽度。
非Bootstrap环境下的CSS Flexbox/Grid方案
如果您不在Bootstrap项目中使用，或者需要更精细的控制，纯CSS的Flexbox或Grid是实现并排布局的强大工具。
1. CSS Flexbox (弹性盒子)
Flexbox 是一种一维布局模型，适用于将项目排列成一行或一列。
<style>
.container-flex {
display: flex; /* 声明为Flex容器 */
justify-content: space-between; /* 子项之间留有空间，或使用 flex-start/end */
align-items: flex-start; /* 子项顶部对齐 */
gap: 20px; /* 子项之间的间距 */
}
.table-wrapper {
flex: 2; /* 表格占据更多空间 */
min-width: 0; /* 允许收缩 */
}
.side-content {
flex: 1; /* 旁侧内容占据较少空间 */
min-width: 0; /* 允许收缩 */
display: flex;
flex-direction: column;
gap: 15px;
}
.side-content img {
max-width: 100%;
height: auto;
}
</style>
<div class="container-flex">
<div class="table-wrapper">
<!-- 您的表格代码 -->
<table class="table" style="width:100%">
<!-- ... -->
</table>
</div>
<div class="side-content">
<!-- 您的图片和第二个表单代码 -->
<img src="https://via.placeholder.com/150" alt="Image 1">
<img src="https://via.placeholder.com/150" alt="Image 2">
<form action="/another_action" method="post">
<!-- ... -->
</form>
</div>
</div>2. CSS Grid (网格布局)
CSS Grid 是一种二维布局模型，适用于将项目排列成行和列。
<style>
.container-grid {
display: grid; /* 声明为Grid容器 */
grid-template-columns: 2fr 1fr; /* 定义两列，左侧2份，右侧1份 */
gap: 20px; /* 列之间的间距 */
align-items: start; /* 行项目顶部对齐 */
}
.grid-table {
/* 表格本身不需要特殊样式，它会占据第一个网格区域 */
}
.grid-side-content {
display: flex; /* 内部使用Flexbox垂直堆叠 */
flex-direction: column;
gap: 15px;
}
.grid-side-content img {
max-width: 100%;
height: auto;
}
</style>
<div class="container-grid">
<div class="grid-table">
<!-- 您的表格代码 -->
<table class="table" style="width:100%">
<!-- ... -->
</table>
</div>
<div class="grid-side-content">
<!-- 您的图片和第二个表单代码 -->
<img src="https://via.placeholder.com/150" alt="Image 1">
<img src="https://via.placeholder.com/150" alt="Image 2">
<form action="/another_action" method="post">
<!-- ... -->
</form>
</div>
</div>注意事项与最佳实践
-
选择合适的布局方式：
- Bootstrap项目： 优先使用Bootstrap Grid系统，因为它与您的项目风格统一，并且提供了现成的响应式支持。
- 非Bootstrap项目或需要高度定制： 推荐使用CSS Flexbox或Grid。Flexbox适用于一维布局（行或列），Grid适用于二维布局（行和列）。
- 响应式设计： 确保您的布局在不同屏幕尺寸下都能良好显示。Bootstrap Grid天生支持响应式，通过col-sm-*、col-lg-*等类可以进一步细化。Flexbox和Grid也提供了强大的响应式能力，可以通过媒体查询（@media）进行调整。
-
图片优化：
- 使用img-fluid类（Bootstrap）或max-width: 100%; height: auto;（纯CSS）确保图片在其容器内正确缩放。
- 优化图片文件大小，以提高页面加载速度。
- 为图片添加有意义的alt属性，提高可访问性。
-
表单结构：
- 确保表单字段有清晰的label，并通过for和id属性正确关联。
- 使用语义化的HTML标签。
- 避免过度使用position: absolute： 尽管position: absolute可以实现元素定位，但它会将元素从正常文档流中移除，可能导致内容重叠或难以维护响应式布局。对于常规的页面布局，应优先考虑Flexbox、Grid或浮动。
总结
实现HTML表格与旁侧元素的并排布局，关键在于改变元素的默认块级显示行为。对于使用Bootstrap框架的项目，利用其强大的网格系统是最简洁高效的方法。通过将表格和旁侧内容分别放置在row内的不同col中，您可以轻松构建出结构清晰、响应式的页面布局。即使在非Bootstrap环境中，CSS Flexbox和Grid也提供了现代且灵活的布局解决方案，帮助您精确控制页面元素的排列。选择最适合您项目需求的布局方法，并始终关注代码的可维护性和用户体验。
