如何实现动态创建的Label和TextBox控件的1/2/3列布局展示？

针对你的动态控件多列布局需求，推荐两种实现方案，优先选择CSS驱动的布局方式（更灵活易维护）：

方案一：CSS Grid 实现多列布局（推荐） #

这种方式无需大幅修改后台逻辑，通过前端CSS控制布局，代码更简洁。

步骤1：重构后台控件生成逻辑 #

移除原代码中添加<br>的冗余逻辑，将每组Label+TextBox包裹在一个容器内，作为布局的最小单元：

If MydataSet.Tables(0).Rows.Count > 0 Then
    For Each MyDataRow As DataRow In MydataSet.Tables(0).Rows
        ' 创建分组容器，作为单条字段的独立单元
        Dim fieldGroup As New HtmlGenericControl("div")
        fieldGroup.CssClass = "field-group"

        ' 生成Label
        Dim lbl As New Label()
        lbl.ID = "lblDynamic_" & MyDataRow("ID")
        lbl.Text = MyDataRow("Title").ToString()
        lbl.CssClass = "label"
        fieldGroup.Controls.Add(lbl)

        ' 生成TextBox
        Dim txt As New TextBox()
        txt.ID = "txtDynamic_" & MyDataRow("ID")
        fieldGroup.Controls.Add(txt)

        ' 将分组添加到主Panel
        Panel_AdditionalData.Controls.Add(fieldGroup)
    Next
End If

步骤2：添加CSS样式 #

根据用户选择的列数，通过切换Panel的CSS类实现布局切换：

/* 基础样式：字段分组的通用样式 */
.field-group {
    margin-bottom: 1rem;
    padding: 0 0.5rem;
}
.field-group .label {
    display: block;
    margin-bottom: 0.5rem;
}
.field-group input[type="text"] {
    width: 100%;
    padding: 0.5rem;
    box-sizing: border-box;
}

/* 1列布局 */
.columns-1 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

/* 2列布局 */
.columns-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* 3列布局 */
.columns-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

步骤3：动态切换布局 #

根据用户选择的列数，设置主Panel的CSS类：

' 示例：用户选择2列时
Panel_AdditionalData.CssClass = "columns-2"

' 用户选择3列时
' Panel_AdditionalData.CssClass = "columns-3"

' 恢复1列时
' Panel_AdditionalData.CssClass = "columns-1"

方案二：后台容器分组实现布局 #

如果偏好通过后台代码控制布局结构，可以将每N个字段分组放入行容器，配合CSS浮动实现多列：

后台代码 #

' 用户选择的列数（可从下拉框等控件获取）
Dim targetColumns As Integer = 2
Dim currentColumnIndex As Integer = 0
Dim currentRowPanel As New Panel()
currentRowPanel.CssClass = "form-row"

If MydataSet.Tables(0).Rows.Count > 0 Then
    For Each MyDataRow As DataRow In MydataSet.Tables(0).Rows
        ' 创建字段分组
        Dim fieldGroup As New HtmlGenericControl("div")
        fieldGroup.CssClass = "field-group"

        ' 添加Label和TextBox
        Dim lbl As New Label()
        lbl.ID = "lblDynamic_" & MyDataRow("ID")
        lbl.Text = MyDataRow("Title").ToString()
        lbl.CssClass = "label"
        fieldGroup.Controls.Add(lbl)

        Dim txt As New TextBox()
        txt.ID = "txtDynamic_" & MyDataRow("ID")
        fieldGroup.Controls.Add(txt)

        ' 将分组加入当前行
        currentRowPanel.Controls.Add(fieldGroup)
        currentColumnIndex += 1

        ' 达到目标列数时，将当前行加入主Panel并新建行
        If currentColumnIndex = targetColumns Then
            Panel_AdditionalData.Controls.Add(currentRowPanel)
            currentRowPanel = New Panel()
            currentRowPanel.CssClass = "form-row"
            currentColumnIndex = 0
        End If
    Next

    ' 添加最后一行（若有剩余未分组的字段）
    If currentColumnIndex > 0 Then
        Panel_AdditionalData.Controls.Add(currentRowPanel)
    End If
End If

对应CSS #

.form-row {
    margin-bottom: 1rem;
    overflow: hidden; /* 清除浮动 */
}
.field-group {
    float: left;
    width: calc(100% / 2 - 1rem); /* 2列布局：平分宽度并减去间距 */
    margin-right: 1rem;
}
.field-group:last-child {
    margin-right: 0;
}
/* 3列布局时，修改width为 calc(100% / 3 - 1rem) */
.label {
    display: block;
    margin-bottom: 0.5rem;
}
.field-group input[type="text"] {
    width: 100%;
    box-sizing: border-box;
}

关键注意事项 #

1. 动态控件的ID需保证唯一，你的原有逻辑已满足此要求
2. PostBack时需重新生成所有动态控件，你已处理此部分逻辑无需额外修改
3. CSS方案更易维护，且支持响应式扩展（可添加媒体查询适配移动端）

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