用于表单布局的HTML / CSS显示表

Question

使用灵活的HTML / CSS布局，您只需添加表单，行，单元格标签，单元格输入类 - 它可以处理所有内容（宽度，垂直对齐等）。

我选择使用display: table和它的孩子table-row，table-cell - 因为它可以顺利处理大部分问题，而不需要黑客攻击。我的目标是拥有这样的东西（我可以在一个单元格中放置2个容器，它们将自动具有50％的宽度，或3个容器的33％，或4个的25％等）：

我遇到的问题是表格单元格中的表格跳出边框：

有任何建议如何解决这个问题？

---

编辑：JSFiddle示例：https://jsfiddle.net/3gcnaetx/1/

Answer 1

我建议使用bootstrap，因为bootstrap提供了一个网格来解决这类问题。如果你想为此制作一个自己的CSS，你可以在我的代码片段中查看这个想法。我不知道它是否能解决你的问题，但我希望它会帮助你前进。

CSS和HTML代码段：

*{
    box-sizing: border-box; 
}
.formrow:after, .col-2:after{
    display: table;
    content: " ";
    clear: both;
}
.col-2 {
    border: 1px dashed black;
    height: 100%;
    padding: 5px;
    width: 50%;
    min-width: 200px;
    float: left;
}
label {
    float: left;
    padding-right: 10px;
}

<div class="form">
    <form>
        <div class="formrow">
            <div class="col-2"><label for="input1">Label</label></div>
            <div class="col-2"><input id="input1"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2"><label for="input2">Even longer label</label></div>
            <div class="col-2"><input id="input2"></input></div>
        </div>
        <div class="formrow">
            <div class="col-2">
                <label for="input3">Label</label>
                <input id="input3"></input>
            </div>
            <div class="col-2">
                <label for="input4">Label</label>
                <input id="input4"></input>
            </div>
        </div>
    </form>
</div>