如何同步表兄弟 html 元素的高度

Question

所以我有以下 jsFiddle：https://jsfiddle.net/4vpnLh52/4/

看起来像这样：

.myRow{
    display: table;
    overflow: auto;
}

.myGroup{
    display: table-cell;
    position: relative;
    max-width: 60px;
}

<div class="myRow">
    <div class="myGroup">
        <div id="label1" class="myLabel myCell">
            LAbel 1:
        </div>
        <div class="myInput myCell">
            Input 1
        </div>
    </div>
    <div class="myGroup">
        <div  id="label2" class="myLabel myCell">
            Label 22222222222222222222222:
        </div>
        <div class="myInput myCell">
            Input 22222222222222222222222
        </div>
    </div>
</div>

基本上我正在寻找的是一种解决方案，它可以使#label1 的高度与#label2 相匹配（并且通过扩展，它们的关联 .myInput。

我知道我可以使用 display:table 来做到这一点，并将标签本身移动到一个单独的行中，但是这些页面由一堆不同的模板组成，并且应该是非常模块化的，所以它是很难将标签与输入分开。另外，可能有些元素没有关联标签。

我希望将更改限制为 html/css 更改，但我愿意使用现代 css3，只要支持 IE10+，包括 flexbox。我看过 flexbox 但我不确定它是否可以达到这个目的。

如有任何建议，我们将不胜感激。

Answer 1

是的，你可以用 flexbox 做到这一点：

将所有元素放在同一个弹性容器中。您可以删除 .myGroup 包装器，或保留它们并使用（警告：未广泛支持）
```
.myGroup {
  display: contents;
}
```

设置弹性容器的样式：

.myRow {
  display: flex;   /* Magic begins */
  flex-wrap: wrap; /* Allow line breaks */
  width: 120px;    /* 2 * 60px */
}

设置弹性项目的样式
```
.myCell {
  width: 50%; /* 60px */
}
```

正确订购弹性商品：

.myCell:nth-child(even) {
  order: 1;
}

这会起作用，因为默认情况下，align-items 是 stretch。所以弹性项目将被拉伸到具有相同的高度。

.myRow {
  display: flex;
  flex-wrap: wrap;
  max-width: 120px;
}
.myCell {
  width: 50%;
}
.myCell:nth-child(even) {
  order: 1;
}

<div class="myRow">
  <div id="label1" class="myLabel myCell">
    Label 1:
  </div>
  <div class="myInput myCell">
    Input 1
  </div>
  <div id="label2" class="myLabel myCell">
    Label 22222222222222222222222:
  </div>
  <div class="myInput myCell">
    Input 22222222222222222222222
  </div>
</div>

如何同步表兄弟 html 元素的高度

How to sync heights of cousin html elements

html

css

flexbox