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

DDD

发布时间：2025-10-07 10:05:50

|

565人浏览过

|

来源于php中文网

原创

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

理解HTML默认布局行为

在html中，大多数元素（如

、

、

、) 默认是块级元素。块级元素会独占一行，并尽可能占据父容器的全部可用宽度，导致后续元素默认从新的一行开始显示。这就是为什么当您在表格之后添加图片或另一个表单时，它们会出现在表格下方的原因。要实现并排布局，我们需要借助css布局技术来改变元素的默认流向。

使用Bootstrap Grid实现表格与旁侧元素的并排布局

鉴于您在现有代码中已经使用了Bootstrap框架（通过row和col-md等类），最推荐且最便捷的解决方案是继续利用Bootstrap的强大网格系统。Bootstrap Grid提供了一个响应式、移动优先的弹性布局方案，能够轻松实现复杂的页面结构。

核心思想： 将表格和您希望放置在右侧的内容（例如图片和第二个表单）包裹在一个共同的div容器中，并为这个容器应用row类。然后，在这个row内部创建两个列（col-md-*），一个用于表格，另一个用于右侧内容。通过调整col-md-*中的数字，您可以控制它们在不同屏幕尺寸下的相对宽度。

实现步骤：

1. 创建主行容器： 在您的表格上方或下方（根据您的整体布局需求），创建一个新的div，并为其添加class="row"。这个row将作为表格和右侧内容的父容器。
2. 定义表格列： 在row内部，为您的表格创建一个div，并为其添加适当的Bootstrap列类，例如class="col-md-8"。这将使表格占据中等及以上屏幕尺寸下行的8个网格单位。
3. 定义右侧内容列： 紧接着表格列，创建另一个div，并为其添加剩余的列类，例如class="col-md-4"。这个div将用于容纳您希望在表格右侧显示的所有内容（图片、第二个表单等）。
4. 放置内容： 将您的现有表格代码放入第一个列div中。将图片和第二个表单的代码放入第二个列div中。

示例代码：

以下是一个修改后的HTML片段，展示了如何使用Bootstrap Grid将表格与右侧的图片和表单并排显示。请注意，为了演示，我添加了占位图片和第二个表单的结构。

立即学习“前端免费学习笔记（深入）”；

Contentfries

将长视频改造成更加引人注目的短视频

下载

{% extends 'login/basic.html' %}
{% block title %}Approval of count{% endblock title %}
{% block body %}


{% csrf_token %}
    

        

            

                
                Shift Date
            
        
        

            

                
                    Server Name
                    {% for server in serverLst %}
                    {{server}}
                    {% endfor %}
                
                Select your server
            
        
        

            

                Submit
            
        
    



 

    
    
 
        

User name	Starting	Ending	Bonus
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat
3	Larry the Bird		@twitter

相关图片

@@##@@ @@##@@

第二个表单

{% csrf_token %}

输入字段 1

输入字段 2

提交表单 2

代码说明：

• 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 是一种一维布局模型，适用于将项目排列成一行或一列。

    

        
        
    
    

        
        @@##@@
        @@##@@
        

            
        
    

2. CSS Grid (网格布局)

CSS Grid 是一种二维布局模型，适用于将项目排列成行和列。

    

        
        
    
    

        
        @@##@@
        @@##@@
        

            
        
    

注意事项与最佳实践

1. 选择合适的布局方式：
   • Bootstrap项目： 优先使用Bootstrap Grid系统，因为它与您的项目风格统一，并且提供了现成的响应式支持。
   • 非Bootstrap项目或需要高度定制： 推荐使用CSS Flexbox或Grid。Flexbox适用于一维布局（行或列），Grid适用于二维布局（行和列）。
2. 响应式设计： 确保您的布局在不同屏幕尺寸下都能良好显示。Bootstrap Grid天生支持响应式，通过col-sm-*、col-lg-*等类可以进一步细化。Flexbox和Grid也提供了强大的响应式能力，可以通过媒体查询（@media）进行调整。
3. 图片优化：
   • 使用img-fluid类（Bootstrap）或max-width: 100%; height: auto;（纯CSS）确保图片在其容器内正确缩放。
   • 优化图片文件大小，以提高页面加载速度。
   • 为图片添加有意义的alt属性，提高可访问性。
4. 表单结构：
   • 确保表单字段有清晰的label，并通过for和id属性正确关联。
   • 使用语义化的HTML标签。
5. 避免过度使用position: absolute： 尽管position: absolute可以实现元素定位，但它会将元素从正常文档流中移除，可能导致内容重叠或难以维护响应式布局。对于常规的页面布局，应优先考虑Flexbox、Grid或浮动。

总结

实现HTML表格与旁侧元素的并排布局，关键在于改变元素的默认块级显示行为。对于使用Bootstrap框架的项目，利用其强大的网格系统是最简洁高效的方法。通过将表格和旁侧内容分别放置在row内的不同col中，您可以轻松构建出结构清晰、响应式的页面布局。即使在非Bootstrap环境中，CSS Flexbox和Grid也提供了现代且灵活的布局解决方案，帮助您精确控制页面元素的排列。选择最适合您项目需求的布局方法，并始终关注代码的可维护性和用户体验。