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

<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; /* 占据可用空间的比例 */
}

<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; /* 列间距 */
}

<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%;
}

<div style="position: relative;"> <!-- 父容器设置为相对定位 -->
    <div style="width: 50%;">表格内容</div>
    <div style="position: absolute; top: 0; right: 0; width: 45%;">图片和表单内容</div>
</div>

{% 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>
                <img src="https://via.placeholder.com/200x150?text=Image+1" class="img-fluid mb-2" alt="统计图表1">
                <img src="https://via.placeholder.com/200x150?text=Image+2" class="img-fluid" alt="统计图表2">
            </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 %}