理解HTML默认布局流
在html中，块级元素（如div, p, table, form等）默认会占据其父容器的整个宽度，并在垂直方向上堆叠显示，即每个块级元素都会从新的一行开始。这就是所谓的“正常文档流”。当我们需要将多个块级元素并排显示时，就需要借助css布局技术来改变这种默认行为。
现代CSS布局技术
为了实现元素的横向排列，CSS提供了多种强大的布局机制。
Flexbox：弹性盒布局
Flexbox（弹性盒布局）是一种一维布局模型，专门用于在容器中沿着单个轴（水平或垂直）排列项目。它是实现内容并排显示最常用且最灵活的现代方法之一。
核心原理： 通过将父容器的display属性设置为flex或inline-flex，其直接子元素将成为弹性项目，并可以根据Flexbox属性进行排列、对齐和分配空间。
示例：
表格或表单图片和另一个表单
.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，可以定义网格的行和列，并将子元素放置在网格的特定单元格中。
示例：
表格内容图片和表单内容
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr; /* 定义两列，每列占据等宽空间 */
gap: 20px; /* 列间距 */
}float属性：浮动布局（传统方法）
float属性是早期实现多列布局的常用方法。通过将元素设置为浮动，它会脱离正常文档流并向左或向右浮动，直到碰到父容器的边缘或另一个浮动元素。
核心原理：float: left; 或 float: right; 使元素浮动。需要使用clear属性来清除浮动，以避免布局混乱。
示例：
表格内容图片和表单内容
.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属性进行精确位置控制。
示例：
表格内容图片和表单内容
注意事项： 绝对定位的元素不占据空间，可能导致内容重叠。它通常用于创建悬浮、叠加效果，或将元素精确放置在特定位置，而不是用于常规的并排布局，因为它对响应式设计不够友好且难以维护。
结合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 %}
{# 表格占据8列，例如总宽度的2/3 #}
数据汇总表格
{# 增加Bootstrap表格样式 #}
User name
Starting
Ending
Bonus
1
Mark
Otto
@mdo
2
Jacob
Thornton
@fat
3
Larry the Bird
@twitter
{# 图片和表单占据4列，例如总宽度的1/3 #}
相关图片与操作
{# 图片组 #}
统计图表
@@##@@
@@##@@
{# 使用Bootstrap卡片样式包裹表单 #}
额外操作表单
{% 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-*意味着在小屏幕（
注意事项与最佳实践
- 响应式设计： 始终考虑不同屏幕尺寸下的布局表现。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框架时，能够高效且优雅地将表格、图片和表单等元素并排显示，从而构建出更具专业性和用户友好性的网页界面。
