如何在Django页面的HTML表格右侧添加图片与表单？

一、核心布局实现（Flexbox 方案） #

Flexbox是实现这种左右分栏布局最简洁的方案，无需复杂浮动处理，兼容性覆盖绝大多数现代浏览器。

1. 完整HTML结构示例（结合Django模板） #

<!-- 顶部表单1 -->
<div class="top-form">
  <form method="POST" action="{% url 'your-form1-action' %}">
    {% csrf_token %}
    <!-- 表单1字段示例 -->
    <input type="text" name="query" placeholder="输入搜索内容">
    <button type="submit">提交</button>
  </form>
</div>

<!-- 下方主内容容器：左侧表格 + 右侧图片+表单2 -->
<div class="main-content">
  <!-- 左侧表格区域 -->
  <div class="table-section">
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
        </tr>
      </thead>
      <tbody>
        {% for item in data %}
        <tr>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

  <!-- 右侧内容区域：图片 + 表单2 -->
  <div class="right-section">
    <!-- 图片容器 -->
    <div class="image-container">
      <img src="{% static 'images/your-image.jpg' %}" alt="图片描述">
    </div>
    <!-- 表单2容器 -->
    <div class="form2-container">
      <form method="POST" action="{% url 'your-form2-action' %}">
        {% csrf_token %}
        <!-- 表单2字段示例 -->
        <label for="name">姓名：</label>
        <input type="text" id="name" name="name">
        <label for="email">邮箱：</label>
        <input type="email" id="email" name="email">
        <button type="submit">提交</button>
      </form>
    </div>
  </div>
</div>

2. 配套CSS样式 #

/* 全局基础重置（推荐，消除默认边距差异） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部表单样式 */
.top-form {
  padding: 1rem;
  background-color: #f5f5f5;
  margin-bottom: 1rem;
}

.top-form form {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

/* 主内容Flex布局核心 */
.main-content {
  display: flex;
  gap: 1.5rem;
  padding: 0 1rem;
  flex-wrap: wrap; /* 小屏幕自动换行，适配移动端 */
}

/* 左侧表格区域：占比可自定义 */
.table-section {
  flex: 2; /* 右侧占1份，左侧占2份，比例可调整 */
  min-width: 300px; /* 最小宽度，避免表格挤变形 */
}

.table-section table {
  width: 100%;
  border-collapse: collapse;
}

.table-section th, .table-section td {
  border: 1px solid #ddd;
  padding: 0.8rem;
  text-align: left;
}

.table-section th {
  background-color: #f0f0f0;
}

/* 右侧内容区域 */
.right-section {
  flex: 1;
  min-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.image-container img {
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.form2-container form {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form2-container label {
  font-weight: 500;
}

.form2-container input {
  padding: 0.5rem;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.form2-container button {
  padding: 0.6rem;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form2-container button:hover {
  background-color: #0056b3;
}

二、代码优化建议 #

1. Django模板层面优化 #

• 使用Django表单类渲染：不要硬写HTML表单字段，改用{{ form.as_p }}/自定义表单模板渲染，自动处理验证、错误信息，减少冗余代码：

  <div class="top-form">
    <form method="POST" action="{% url 'your-form1-action' %}">
      {% csrf_token %}
      {{ form1.as_p }}
      <button type="submit">提交</button>
    </form>
  </div>
  

• 模板继承复用：将导航、页脚等通用部分抽离到base.html，当前页面通过{% extends 'base.html' %}和{% block content %}填充内容，避免重复代码。
• 规范静态文件引用：图片、CSS文件统一放在static目录，用{% static %}标签引用，避免绝对路径导致部署问题。

2. CSS与布局优化 #

• 增强响应式适配：添加媒体查询，针对小屏幕强制垂直布局：

  @media (max-width: 768px) {
    .main-content {
      flex-direction: column;
    }
    .table-section, .right-section {
      flex: 1;
      min-width: auto;
    }
  }
  

• 语义化HTML：用<header>包裹顶部表单，<section>包裹表格和右侧内容，提升页面语义性，利于SEO和无障碍访问。
• 样式模块化拆分：将CSS拆分为layout.css、forms.css、tables.css等文件，在模板中统一引入，方便维护。

3. 性能优化 #

• 表格分页处理：如果数据量较大，用Django的Paginator实现分页，避免一次性渲染大量数据拖慢页面。
• 图片压缩优化：上传图片时压缩尺寸，或用Pillow生成缩略图，减少页面加载时间。

内容的提问来源于stack exchange，提问作者DHRUV KABRA