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：

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

设置flex容器的样式：

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

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

正确订购Flex项目：

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

这样可行，因为默认情况下，align-items为stretch。因此，弹性项目将被拉伸到相同的高度。

＆＃13;

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

＆＃13;

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

＆＃13;

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

1 个答案: