HTML布局技巧：如何在表格旁并排显示图片与表单-html教程-PHP中文网

HTML布局技巧：如何在表格旁并排显示图片与表单

本文旨在解决HTML元素默认堆叠问题，特别是如何在现有表格的右侧放置图片和表单。我们将通过详细的教程，重点介绍如何利用Bootstrap的网格系统实现这种并排布局，并提供示例代码和最佳实践，帮助您构建结构清晰、响应式的网页界面。

理解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 %}

登录后复制

代码说明：

表单大师AI

一款基于自然语言处理技术的智能在线表单创建工具，可以帮助用户快速、高效地生成各类专业表单。

查看详情

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也提供了现代且灵活的布局解决方案，帮助您精确控制页面元素的排列。选择最适合您项目需求的布局方法，并始终关注代码的可维护性和用户体验。

以上就是HTML布局技巧：如何在表格旁并排显示图片与表单的详细内容，更多请关注php中文网其它相关文章！