使用 DIV 的 HTML 复杂表单布局

Question

我需要制作多列表单布局，其中每一行可以有不同数量的字段，如下所示:

我第一次使用表格和td 的colspan 属性来创建布局。但我读到使用表格进行布局并不是一个好主意，所以我想改进我的代码以使用 div。

那么谁能给我一个很好的例子，说明如何根据最佳实践进行上述布局？对我来说最大的问题是列的宽度不同。

谢谢。

Answer 1

不要因为我没有编写 100% 有效的 input 字段和没有带有边距等的清晰布局而杀了我。

示例

http://jsfiddle.net/hpmJ7/4/

HTML

<div>
    <div class="w50">
        <span class="label">Name</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Surname</span>
        <input type="text" value="Test" />
    </div>

    <div class="w100">
        <span class="label">Contact</span>
        <input type="text" value="Test" />
    </div>

    <div class="w50">
        <span class="label">Age</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Email</span>
        <input type="text" value="Test" />
    </div>

    <div class="w70">
        <span class="label">Phone</span>
        <input type="text" value="Test" />
    </div>
    <div class="w30">
        <span class="label">Time</span>
        <input type="text" value="Test" />
    </div>

    <div class="w50">
        <span class="label">Age</span>
        <input type="text" value="Test" />
    </div>
    <div class="w50">
        <span class="label">Email</span>
        <input type="text" value="Test" />
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0;    
}
.label {
    width: 60px;
    display: inline-block;
}
.w30, .w50, .w70, .w100 {
    height: 20px;
    float: left;
    display: inline-block;
    width: 100%;
}
.w30{
    width: 30%;
}
.w50{
    width: 50%;
}
.w70{
    width: 70%;
}
.w100{
    width: 100%;
}