正确控制特定元素布局的方法？

Question

我正在设计一个特定的表单，左边有一个字段集，右边是三个字段集。

我用不同的方法创建了3个jsfiddles：

使用<br>：http://jsfiddle.net/pdgreen/GjdRj/

进行黑客攻击

CSS同级选择器：http://jsfiddle.net/pdgreen/GjdRj/1/

ID：http://jsfiddle.net/pdgreen/GjdRj/3/

<br>解决方案是充当稻草人。不应该认真对待。我喜欢CSS兄弟选择器解决方案，因为它在HTML中不需要任何特殊内容，但它很快就会在复杂性方面失控。使用ID是正确的方法吗？我想这是最直接的，但它感觉不对。还有更好的方法吗？

Answer 1

为什么不使用nth-child(n)？ My fork of your jsFiddle

基本理念是：

.container > fieldset.fsGroup:first-child {
height:20em;
}

.container > fieldset.fsGroup:nth-child(2) {
    height:5em;
}
...