如何使用css自动调整其2个字段集的边框高度？

Question

如何使用css自动对齐此2个字段集的边框高度？

  /*Fieldset and Legend*/
    .the-legend {
        font-size: .9vw;
        font-weight: 600;
        line-height: 10px;
        width:auto;
        padding:0 10px;
        border-bottom:none;
    }

    .the-fieldset {
        border: 1px solid silver;
        border-radius: 5px;
        padding: 20px;
        margin-bottom: 15px;
     }

请帮帮我。并谢谢

更新

上面的代码是我的代码的结构。 我每行划分我的字段集。

Answer 1

您可以将它们放在父容器（如表格或div）中，让两个孩子在

 height=100%.

Answer 2

您可以使用表格显示（与表格无关 - HTML - 结构，这是表格数据的方式，以及不这样做的方式）。
细胞具有相同高度的niiiice属性（无论你尝试什么，它都会粘在同一行/行上）

当您将代码发布为图像时，最小的示例（兼容性IE8 +）：

.col-lg-12 {
  display: table;
  table-layout: fixed; /* the other tabular algorithm */
  width: 100%;
}
.col-lg-6 {
  display: table-cell;
  width: 50%
}
/* Managing gutter between fieldset. No margin, only padding, on cells so we use inner elements */
.col-lg-6:first-child .the-fieldset {
  margin-right: 2rem;
}
.col-lg-6:last-child .the-fieldset {
  margin-left: 2rem;
}

编辑：.col-lg-6具有相同的高度，但仍然没有字段集（向{8}添加outline: 1px dotted someColor并且您将看到它）。因此，您需要将height: 100%添加到容器（单元格），带边框的元素（fieldset）以及中间的所有元素（此处为none）。或者从fieldset中删除边框并将其添加到.col-lg-6;它不会改变语义或可访问性，并具有相同的视觉效果

EDIT2：Flexbox是另一种轻松管理垂直高度的方法。兼容性是IE10 +（如果你使用Autoprefixer，很容易实现和维护，否则 meh ）