如何在垂直布局的父Div中实现部分子元素的水平嵌套布局？

需求说明 #

我想要实现如下布局：

• 左右两个绿色圆角面板并排展示
• 左侧面板内部：
  1. Text1 与下拉选择框垂直排列
  2. Text2+输入框、Text3+输入框水平排列（两组在同一行）
• 右侧面板内部：Text4 与按钮垂直排列

原代码及问题 #

原代码尝试用浮动实现，但布局混乱，未达到预期效果：

<html>
<head>
    <title>Templated client</title>
    <style> 
        #rcorners4 {
          border-radius: 15px;
          background: #73AD21;
          padding: 20px; 
          width: 500px;
          height: 150px; 
          margin-right: 50px;
        } 
        .aParent div {
            float: left;
            clear: none; 
        }
        .selectWrapper{
            border-radius:36px;
            display:inline-block;
            overflow:hidden;
            background:#cccccc;
            border:1px solid #cccccc;
        }
        .selectBox{
            border-radius:36px;
            width:140px;
            height:40px;
            border:0px;
            outline:none;
        }
        
        </style>
</head>
<body>
    <div class="aParent">
        <div vertical layout id="rcorners4">
           <div>
                <p>Text1</p>
                <select class="selectBox">
                    <option selected disabled>Choose here</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>
            </div>
            <div>
                <p>Text2</p>
                <input type="text" value="Test text"/>
                <p>Text 3</p>
                <input type="text" value="Test text" />
            </div>
        </div>
        <div id="rcorners4">
            <p>Text4</p>
                <input type="button" value="Test text"/>
        </div>
    </div>
</body>
</html>

修改后的代码（使用Flexbox实现） #

Flexbox更符合桌面开发的布局思维，能轻松实现嵌套排列：

<html>
<head>
    <title>Templated client</title>
    <style> 
        /* 外层容器：左右面板并排 */
        .aParent {
            display: flex;
            gap: 50px; /* 替代margin-right，更直观控制间距 */
            align-items: flex-start;
        }

        /* 通用面板样式 */
        .panel {
            border-radius: 15px;
            background: #73AD21;
            padding: 20px; 
            width: 500px;
            height: 150px; 
        }

        /* 左面板内部容器：上下两部分垂直排列 */
        .left-panel-content {
            display: flex;
            flex-direction: column;
            gap: 20px; /* 上下部分的间距 */
            height: 100%;
        }

        /* Text1与下拉的垂直容器 */
        .vertical-group {
            display: flex;
            flex-direction: column;
            gap: 8px; /* 文字和控件的间距 */
        }

        /* Text2/Text3与输入框的水平容器组 */
        .horizontal-groups {
            display: flex;
            gap: 30px; /* 两组之间的间距 */
        }

        /* 单个水平组：文字+输入框 */
        .horizontal-group {
            display: flex;
            align-items: center;
            gap: 8px; /* 文字和输入框的间距 */
        }

        /* 下拉框样式保留 */
        .selectBox{
            border-radius:36px;
            width:140px;
            height:40px;
            border:0px;
            outline:none;
            background: #cccccc;
        }

        /* 去掉默认p标签的margin，避免多余间距 */
        p {
            margin: 0;
        }
    </style>
</head>
<body>
    <div class="aParent">
        <div class="panel">
            <div class="left-panel-content">
                <!-- 第一部分：垂直排列的Text1和下拉 -->
                <div class="vertical-group">
                    <p>Text1</p>
                    <select class="selectBox">
                        <option selected disabled>Choose here</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                        <option>Option 4</option>
                    </select>
                </div>
                <!-- 第二部分：水平排列的两组 -->
                <div class="horizontal-groups">
                    <div class="horizontal-group">
                        <p>Text2</p>
                        <input type="text" value="Test text"/>
                    </div>
                    <div class="horizontal-group">
                        <p>Text3</p>
                        <input type="text" value="Test text" />
                    </div>
                </div>
            </div>
        </div>
        <div class="panel">
            <div class="vertical-group">
                <p>Text4</p>
                <input type="button" value="Test text"/>
            </div>
        </div>
    </div>
</body>
</html>

关键改动说明 #

1. 使用Flexbox替代浮动：Flexbox是现代CSS布局方案，类似桌面开发的布局容器，通过display: flex、flex-direction控制排列方向，gap控制间距，比浮动更直观易维护。
2. 结构化嵌套容器：将布局拆分为外层并排容器、左面板内部垂直容器、水平组容器，每个容器负责单一排列逻辑，和桌面开发的布局组件逻辑一致。
3. 统一样式类：将重复的#rcorners4改为类.panel，避免ID重复（ID在页面中必须唯一），同时复用样式。
4. 清除默认间距：去掉p标签的默认margin，避免布局出现意外空白。

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