时间戳

首页 > 解决方案 > 当父级已经使用 flex 来证明内容的合理性时，使用 flexbox 使用等高的 css 类

html - 当父级已经使用 flex 来证明内容的合理性时，使用 flexbox 使用等高的 css 类

问题描述

我有多行 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在不影响 3 列布局的情况下都具有相同的高度space-between？如果可能的话，我不希望我们使用 javascript 解决方案。

JSFiddle

截屏

标签： htmlcssflexbox

解决方案

不，我认为仅使用 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/

-> 仅在您调整窗口大小时才有效

推荐阅读