如何同步表兄弟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的更改，但只要支持IE10+，包括flexbox，我愿意使用现代css3。我看过flexbox，但我不确定它是否能达到这个目的。

Answer 1

是的，你可以用flexbox:

• 将所有元素放在同一个伸缩容器中。您可以删除.myGroup包装器，或者保留它们并使用(警告:不被广泛支持)

  .myGroup {
    display: contents;
  }
  

• 设置flex容器的样式:

  .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>