如何实现含5个只读字段及带复选框滚动条的左侧分区页面？

参考示例图 #

需求概述 #

我正在设计一个包含5个字段和多个带滚动条分区的页面，具体需求：

• 页面包含5个**不可编辑（只读）**字段
• 在这5个字段下方，设置左、中、右三个带滚动条的分区

问题 #

如何在页面左侧添加一个可容纳不同内容、带有复选框和滚动条的分区？

左侧分区要求示例 #

左侧分区需包含带复选框的选项，例如：

• India（复选框）
• Australia（复选框）
• Singapore（复选框）
• 以此类推，用户可点击复选框；当列表内容较多时，需显示滚动条

完整实现代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>只读表单与多滚动分区页面</title>
    <style>
        /* 只读表单样式 */
        form {
            display: grid;
            grid-template-columns: max-content 1fr;
            gap: 10px;
            max-width: 800px;
            margin: 20px 0;
        }

        label {
            margin-bottom: 10px;
            font-weight: 500;
        }

        .form-row {
            display: flex;
            align-items: center;
        }

        input[readonly] {
            margin-left: 10px;
            padding: 6px 8px;
            border: 1px solid #ddd;
            background-color: #f5f5f5;
            cursor: default;
        }

        /* 三分区容器 */
        .scroll-sections {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
            max-width: 1200px;
        }

        /* 通用滚动容器样式 */
        .scroll-container {
            max-height: 300px;
            overflow-y: auto;
            border: 1px solid #ccc;
            padding: 15px;
            border-radius: 4px;
            background-color: #fff;
        }

        /* 左侧复选框列表样式 */
        .checkbox-item {
            display: flex;
            align-items: center;
            margin-bottom: 8px;
            cursor: pointer;
        }

        .checkbox-item input[type="checkbox"] {
            margin-right: 8px;
        }
    </style>
</head>
<body>
    <!-- 5个只读字段表单 -->
    <form>
        <div class="form-row">
            <label for="field1">字段1:</label>
            <input type="text" id="field1" value="不可编辑值1" readonly>
        </div>
        <div class="form-row">
            <label for="field2">字段2:</label>
            <input type="text" id="field2" value="不可编辑值2" readonly>
        </div>
        <div class="form-row">
            <label for="field3">字段3:</label>
            <input type="text" id="field3" value="不可编辑值3" readonly>
        </div>
        <div class="form-row">
            <label for="field4">字段4:</label>
            <input type="text" id="field4" value="不可编辑值4" readonly>
        </div>
        <div class="form-row">
            <label for="field5">字段5:</label>
            <input type="text" id="field5" value="不可编辑值5" readonly>
        </div>
    </form>

    <!-- 三滚动分区容器 -->
    <div class="scroll-sections">
        <!-- 左侧带复选框的滚动分区 -->
        <div class="scroll-container">
            <div class="checkbox-item">
                <input type="checkbox" id="india">
                <label for="india">India</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="australia">
                <label for="australia">Australia</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="singapore">
                <label for="singapore">Singapore</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="japan">
                <label for="japan">Japan</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="korea">
                <label for="korea">Korea</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="usa">
                <label for="usa">USA</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="canada">
                <label for="canada">Canada</label>
            </div>
            <div class="checkbox-item">
                <input type="checkbox" id="uk">
                <label for="uk">UK</label>
            </div>
        </div>

        <!-- 中间滚动分区 -->
        <div class="scroll-container">
            <p>中间分区内容示例</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
        </div>

        <!-- 右侧滚动分区 -->
        <div class="scroll-container">
            <p>右侧分区内容示例</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
            <p>更多内容...</p>
        </div>
    </div>
</body>
</html>

关键实现说明 #

1. 只读字段优化：给只读输入框添加背景色和光标样式，强化不可编辑的视觉提示
2. 三分区布局：使用grid-template-columns: 1fr 1fr 1fr实现三个等宽分区，通过gap控制间距
3. 滚动容器：设置max-height和overflow-y: auto实现垂直滚动，内容超出高度时自动显示滚动条
4. 复选框列表：用flex布局实现文字与复选框对齐，每个选项绑定独立id和label，提升可访问性

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