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

Question

我正在设计一个特定的表单，左侧的字段集与右侧的三个字段集一样高。

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

黑客攻击：http <br>: //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)？我的你的 jsFiddle 的叉子

基本思想是：

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

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