html - 当父级已经使用 flex 来调整内容时，使用 flexbox 使用等高的 css 类

Question

我有多行 3 列。在每一列中都有一个主要内容 SavedSearchBox-content(具有不同的排列，因此高度可以不同)和一个页脚 SavedSearchBox-footer

我正在使用 flexbox 以便我可以使用 3 列并且之间有空间，所以只有中间列有水平空间。

这是我的示例行的 HTML 结构，其中包含 3 列和 3 种排列。

• 使用药丸和按钮
• 没有药丸，没有按钮
• 有药丸，没有按钮

<div class="SavedSearches-wrapper">
  <div class="SavedSearchBox">
    <div class="SavedSearchBox-content">
      <h1 class="SavedSearchBox-title">This is a longer title for testing</h1>
      <p class="SavedSearchBox-tagline">This is a tag line</p>
      <a href="javascript:;" class="SavedSearchBox-searchLink">This is a link</a>
      <div class="SavedSearchBox-propertyCount">
        <div class="Pill">4 New</div> <strong>searches</strong>
      </div>
    </div>
    <div class="SavedSearchBox-footer"><a class="Button ">Subscribe to this Alert</a></div>
  </div>
  <div class="SavedSearchBox">
    <div class="SavedSearchBox-content"><h1 class="SavedSearchBox-title">This is a title</h1>
      <p class="SavedSearchBox-tagline">This is a tagline</p>
      <a href="javascript:;" class="SavedSearchBox-searchLink">This is a link</a>
      <div class="SavedSearchBox-propertyCount"></div>
    </div>
    <div class="SavedSearchBox-footer">
      <div class="RadioListToggler SavedSearchBox-Toggler">
        <a href="javascript:;" class="RadioListToggler-Link">Change alert frequency</a>
      </div>
    </div>
  </div>
  <div class="SavedSearchBox">
    <div class="SavedSearchBox-content"><h1 class="SavedSearchBox-title">This is a title</h1>
      <p class="SavedSearchBox-tagline">This is a tagline</p>
      <a href="javascript:;" class="SavedSearchBox-searchLink">This is a link</a>
      <div class="SavedSearchBox-propertyCount">
        <div class="Pill">6 New</div> <strong>searches</strong>
      </div>
    </div>
    <div class="SavedSearchBox-footer">
      <div class="RadioListToggler SavedSearchBox-Toggler">
        <a href="javascript:;" class="RadioListToggler-Link">Change alert frequency</a>
      </div>
    </div>
  </div>
</div>

这是我的 css，包装器使用 flex 和 justify 内容。

.SavedSearches-wrapper {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    justify-content: space-between;
}

.SavedSearchBox {
    max-width: 340px;
    width: calc((100%/3) - 64px);
    border: 1px solid #d8d8d8;
    display: inline-block;
    vertical-align: top;
    margin: 20px 0px;
    background: #ffffff;
}

.SavedSearchBox .SavedSearchBox-content {
    padding: 22px 22px 0px 22px;
}

我的问题是，有没有一种方法可以让所有 SavedSearchBox-content 具有相同的高度，同时又不会影响 space-between 的 3 列布局？如果可能的话，我不希望我们使用 JavaScript 解决方案。

JSFiddle

Answer 1

不，我认为仅使用 css 无法使元素的高度相等。但是您可以使用简单的 jquery 代码使其工作。

 function kb_equal_height_two() {
  var highest_element_two = 0;

  // Lösche die Höhe
  $('.SavedSearchBox-content').each(function() {
    $(this).removeAttr('style');
  });

  // Prüfe, welches Element am höchsten ist
  $('.SavedSearchBox-content').each(function() {
    if ($(this).height() > highest_element_two) {
      highest_element_two = $(this).height();
    }
  });

  // Weise diese Höhe allen Elementen zu.
  $('.SavedSearchBox-content').each(function() {
    $(this).height(highest_element_two);
  });
};
var resizeTimer_two;
$(window).resize(function() {
  clearTimeout(resizeTimer_two);
  resizeTimer_two = setTimeout(kb_equal_height_two, 1);
});

只需在页面加载时添加一个加载事件以均衡高度。 https://jsfiddle.net/sqk8howx/1/

-> 只有调整窗口大小才有效