javascript - 如何仅使用 CSS 使左右两侧的高度相等？

Question

我需要使 Hero 元素的高度相等，如下所示 https://codepen.io/hellouniverse/pen/KqvYoj .我是用 JavaScript 做的。但是，我感觉很恶心。我尝试使用 CSS flex 使高度相等。但是，只有当左右两侧的白框内的文本行数不同时，我才无法使用 CSS 设置高度。

当行号不同时，如何仅使用 CSS 使高度相等？

  var $firstHeroTwinHeight;
  var $secondHeroTwinHeight;
  var $firstHeroTwinHeightContents;
  var $secondHeroTwinHeightContents;

  if ($(window).width() > 767) {
    if ($('.section-hero').length > 0) {
      $firstHeroTwinHeightContents = $('.section-hero .field-items .field-item:first-child .hero__contents');
      $secondHeroTwinHeightContents = $('.section-hero .field-items .field-item:last-child .hero__contents');
      $firstHeroTwinHeight = $firstHeroTwinHeightContents.outerHeight();
      $secondHeroTwinHeight = $secondHeroTwinHeightContents.outerHeight();

      if ($firstHeroTwinHeight > $secondHeroTwinHeight) {
        $secondHeroTwinHeightContents.css('height', $firstHeroTwinHeight);
      }
      else {
        $firstHeroTwinHeightContents.css('height', $secondHeroTwinHeight);
      }
    }
  }

我有一个codepen https://codepen.io/hellouniverse/pen/KqvYoj我试图在没有 js 的情况下复制我所拥有的东西

Answer 1

最好的猜测:)

.field-items {
  display: flex;
  justify-content: space-around;
  /* justify-content: space-between; ** pushes children to the sides
  justify-content: flex-start; ** pushes children to the left
  justify-content: flex-end; ** pushes children to the left */
  padding: 1em;
  border: thin solid lightgray;
}

<div class="container">
  <div class="section-hero">
    <div class="field-items">
      <div class="field-item"><img src="http://placehold.it/200/00ff00"></div>
      <div class="field-item"><img src="http://placehold.it/200/0000ff"></div>
    </div>
  </div>
</div>