Использование равной высоты класса css с использованием flexbox, когда родитель уже использует flex для выравнивания содержимого

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 и выравнивает содержимое.

.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? Я бы предпочел не использовать 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/

-> просто работает, если вы измените размер окна

Answer 2

Я большой поклонник Flex, но как только я начал играть в css-grid , я понял, что он НАИЛУЧШЕ мощнее, чем Flex для позиционирования, и, конечно, сетки.

вот что я сделал:

.SavedSearches-wrapper {
  margin: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 1rem;
  padding: 1rem;
}

.SavedSearchBox {
  border: 1px solid #d8d8d8;
  display: inline-block;
  vertical-align: top;
  background: #ffffff;
}

Я изменил display: flex на display: grid.grid-template-columns: позволяет мне определить столбцы.Вы хотели 3 столбца, поэтому я дал его 1fr 1fr 1fr.fr означает дробь.поэтому я разделил сетку на 3 фракции.Я добавил grid-column-gap, то есть промежуток между каждым элементом сетки, и его легко изменить.

Я добавил заполнение к контейнеру сетки, чтобы элементы не переходили от края к краю.

Я снял все ограничения ширины с элемента SavedSearchBox, поскольку ширина определяется родителем SavedSearches-wrapper в grid-template-columns.

При этом я думаю, что это то, чего вы пытаетесь достичь, см. JS Fiddle

(Не забудьте добавить свои префиксы webkit, чтобы обеспечить его работу в разных браузерах.)

Надеюсь, это поможет.Удачного кодирования!

body {
  margin: 0;
}

.SavedSearches-wrapper {
    padding: 0;
    margin: 0;
    list-style: none;
    /* CHANGE TO GRID */
    display: grid;
    /* DEFINE THE NUMBER OF COLUMNS (1fr is 1 fraction) */
    grid-template-columns: 1fr 1fr 1fr;
    /* DEFINE COLUMN GAP */
    grid-column-gap: 1rem;
    /* ADD PADDING TO ENTIRE CONTAINER IF YOU DONT WANT IT EDGE TO EDGE */
    padding: 1rem;
}

.SavedSearchBox {
  /* REMOVE WIDTH LIMITS HERE */
    border: 1px solid #d8d8d8;
    display: inline-block;
    vertical-align: top;
    background: #ffffff;
}

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

.SavedSearchBox .SavedSearchBox-title {
    font-size: 20px;
    line-height: 1.1;
    margin: 0px;
    padding: 0px;
    text-transform: uppercase;
    color: #353535;
}

.SavedSearchBox .SavedSearchBox-tagline {
    font-size: 14px;
    padding: 3px 0px 0px 0px;
    margin: 0px;
    color: #999999;
}

.SavedSearchBox .SavedSearchBox-searchLink {
    color: #ee4900;
    display: inline-block;
    margin-top: 27px;
    margin-bottom: 30px;
}

.SavedSearchBox .SavedSearchBox-propertyCount {
    font-size: 14px;
    margin-bottom: 14px;
}

.Pill {
    padding: 3px;
    padding-left: 7px;
    padding-right: 7px;
    color: #ffffff;
    display: inline-block;
    border-radius: 7px;
    background-color: #ee4900;
    font-size: 11px;
    font-weight: bold;
    line-height: 2;
    text-transform: uppercase;
}

.SavedSearchBox .SavedSearchBox-footer {
    border-top: 1px dashed #d8d8d8;
    padding: 10px 18px 12px 18px;
}

.Button {
    -webkit-font-smoothing: antialiased;
    color: #ffffff;
    background-color: #ee4900;
    cursor: pointer;
    width: 100%;
    font-weight: 600;
    display: block;
    text-transform: uppercase;
    font-size: 0.95em;
    height: 60px;
    text-decoration: none;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    outline: 0px;
    margin: 0 0;
    border: none;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 60px;
    opacity: 1;
    border-radius: 3px;
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;
    transition: all 0.4s ease 0s, height 0ms 0ms, opacity 600ms 0ms, opacity 600ms 0ms;
}

.RadioListToggler {
    margin-top: 19px;
    margin-bottom: 19px;
    line-height: 1.38;
}

.RadioListToggler-Link {
    color: #ee4900;
    display: flex;
    align-items: center;
    vertical-align: middle;
}

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