Question

我需要让英雄元素的高度与此处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

最佳猜测：）

＆＃13;

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

＆＃13;

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

＆＃13;

如何仅使用CSS在左右两侧使高度相等？

1 个答案: