html - 表格布局到 CSS 布局如何解决 colspan？

Question

如果我用老式的方式创建一个带有表格的布局:

input {
    width: 100%;    
    padding: 5px;
}
table {
    border-collapse: collapse;  
    padding: 0;
    margin: 0;
    width: 50%;
}
td {
    padding: 5px;
}

<table>
  <tr>
    <td colspan="3"><label>Label 1:</label></td>
  </tr>
  <tr>
    <td colspan="3"><input type="text" /></td>
  </tr>                               
  <tr>
    <td><label>Label 2:</label></td>
    <td>&nbsp;</td><td>
    <label>Label 3:</label></td>
  </tr>
  <tr>
    <td><input type="text" /></td>
    <td>&nbsp;</td>
    <td><input type="text" /></td>
  </tr>

  <tr>
    <td colspan="3"><label>Label 4:</label></td>
  </tr>
  <tr>
    <td colspan="3"><input type="text" /></td>
  </tr>

  <tr>
    <td colspan="3"><label>Label 5:</label></td>
  </tr>
  <tr>
    <td colspan="3"><input type="text" /></td>
  </tr>           
</table>

https://jsfiddle.net/njb69anL/

我得到一个类似于屏幕上网格的布局。它很容易调整到浏览器的宽度。一切都被正确地隔开和放置。

但是，我的 html 标记充满了表格标记。如果我想摆脱表格，我将从使标记语义化开始:

        <div id="grp">
            <label>Label 1:</label><input type="text" />
            <label>Label 2:</label><input type="text" />
            <label>Label 3:</label><input type="text" />
            <label>Label 4:</label><input type="text" />
            <label>Label 5:</label><input type="text" />            
        </div>

但是否有可能用这个小标记实现相同的类似表格的布局？似乎 display: table 不能做 colspan，最棘手的部分是一行有两个标签，在同一行上输入对。是否可以在不添加一大堆包装器 div 的情况下实现这一目标，从而使原始标记变得困惑(非语义)？

Answer 1

* {
  box-sizing: border-box;
}

.labels-wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 40%;
}

label {
  flex-basis: 100%;
  padding: 10px;
}
label:nth-child(2),
label:nth-child(3) {
  flex-basis: 50%;
}

input {
  margin-top: 5px;
  display: block;
  width: 100%;
}

<div class="labels-wrapper">
  <label>Label 1:
    <input type="text" />
  </label>
  <label>Label 2:
    <input type="text" />
  </label>
  <label>Label 3:
    <input type="text" />
  </label>
  <label>Label 4:
    <input type="text" />
  </label>
  <label>Label 5:
    <input type="text" />
  </label>
</div>

添加 flexbox 示例作为替代方案。请使用“整页”按钮真正感受它的外观。