使用CSS与Bootstrap实现HTML元素横向布局：表格旁放置图片与表单

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

使用CSS与Bootstrap实现HTML元素横向布局：表格旁放置图片与表单

2025-10-07

浏览次数：次

返回列表

使用CSS与Bootstrap实现HTML元素横向布局：表格旁放置图片与表单

本文旨在指导开发者如何在HTML中实现复杂的横向布局，特别是在现有表格的右侧并排显示图片和另一个表单。文章将深入探讨Flexbox、CSS Grid等现代CSS布局技术，并结合Bootstrap框架提供详细的实践示例。通过学习，您将掌握如何利用CSS属性和Bootstrap的栅格系统，优雅地解决元素并排显示的需求，提升网页布局的灵活性和响应性。

理解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灵活，且容易产生浮动清除问题。

AI Surge Cloud

低代码数据分析平台，帮助企业快速交付深度数据

87 查看详情 AI Surge Cloud

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>
                @@##@@
                @@##@@
            </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-*意味着在小屏幕（

注意事项与最佳实践

响应式设计： 始终考虑不同屏幕尺寸下的布局表现。Bootstrap栅格系统是实现响应式设计的优秀工具。对于自定义CSS，确保使用媒体查询（@media）来调整样式。
语义化HTML： 使用具有实际意义的HTML标签（如header, n*, main, section, article, aside, footer等），而不是一味地使用div。这有助于提高代码的可读性、可维护性和SEO。
代码可维护性： 保持HTML结构清晰、CSS代码组织有序。避免过度嵌套，合理使用类名。
避免过度使用position: absolute： 对于常规的页面布局，应优先考虑Flexbox、CSS Grid或Bootstrap栅格系统。position: absolute应保留给特定场景，如工具提示、模态框、或需要精确覆盖的元素。
测试： 在不同浏览器和设备上测试您的布局，确保兼容性和一致性。

通过以上方法，您可以灵活地在HTML中实现复杂的横向布局，尤其是在使用Bootstrap框架时，能够高效且优雅地将表格、图片和表单等元素并排显示，从而构建出更具专业性和用户友好性的网页界面。