Часто используемые коллекции макетов с несколькими столбцами одинаковой высоты

CSS

1. Введение к статье

Когда мы пишем страницы, мы часто сталкиваемся с макетами из нескольких столбцов. Если столбцы имеют цвет фона и высота содержимого столбцов разная, это приведет к тому, что нижняя часть каждого столбца будет неровной. Пользовательский интерфейс не очень хорош! Фактический эффект проблемы показан на следующем рисунке:


2. Требования следующие

Эффект, которого мы хотим добиться, состоит в том, чтобы убедиться, что каждый столбец по-прежнему выровнен, когда содержимое каждого столбца отличается. Желаемый эффект показан на следующем рисунке:


3. Как решить

Код структуры HTML выглядит следующим образом:

  <ul class="Article">
    <li class="js-article-item">
      <p>
      一家将客户利益置于首位的经纪商，
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商，
      为客户提供专业的交易工具一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
      </p>
    </li>
    <li class="js-article-item">
      <p>一家将客户利益置于首位的经纪商，为客户提供专业的交易工具
      一家将客户利益置于首位的经纪商，为客户提供专业的交易工具</p>
    </li>
    <li class="js-article-item">
      <p>一家将客户利益置于首位的经纪商</p>
    </li>
  </ul>

1. Реализация хеджирования с использованием отрицательного значения margin-bottom и положительного padding-bottom.

.Article {
  overflow: hidden;
}

.Article>li {
  float: left;
  margin: 0 10px -9999px 0;
  padding-bottom: 9999px;
  background: #4577dc;
  width: 200px;
  color: #fff;
}

.Article>li>p {
  padding: 10px;
}

padding-bottom, установленный элементом, должен быть как можно больше, а отрицательное значение margin-bottom того же размера должно быть установлено для смещения увеличенной области padding-bottom.Положительное и отрицательное смещения не повлияют макет страницы. Кроме того, вам необходимо установить параметр overflow: hidden для родительского элемента, чтобы скрыть дополнительный цветной блок фона дочернего элемента.

2. Имитация раскладки стола

.Article {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.Article>li {
  display: table-cell;
  width: 200px;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}

Элементы table-cell в элементе table по умолчанию имеют одинаковую высоту.

3. гибкий макет

.Article {
  display: flex;
}

.Article>li {
  flex: 1;
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}

Растянутые элементы в flex по умолчанию растягиваются до высоты родительского элемента, и также может быть достигнут такой же эффект высоты. Совместимость на стороне ПК не очень хорошая, и она не поддерживается в ie9 и ниже.

4, макет сетки

.Article {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
}

.Article>li {
  border-left: solid 5px currentColor;
  border-right: solid 5px currentColor;
  color: #fff;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}

Недостаток grid layout тот же, что и у flex: совместимость на стороне ПК не очень хорошая, ie9 и ниже не поддерживаются.

5. js-расчет

.Article>li {
  float: left;
  border: solid 5px #fff;
  width: 33%;
  color: #fff;
  font-size: 16px;
  background: #4577dc;
}

.Article>li>p {
  padding: 10px;
}


jQuery( document ).ready(function() {
  setEqualheight();
});

jQuery(window).resize(function() {
  jQuery('.js-article-item').css('height','auto');
  setEqualheight();
});

function setEqualheight() {
  var height = jQuery(".js-article-item").map(function() {
    return jQuery(this).height();
  }).get();

  jQuery(".js-article-item").height( Math.max.apply(null, height) );
}

6. Резюме

Если у вас есть какие-либо вопросы или лучшие предложения, пожалуйста, оставьте сообщение в области комментариев. Написание ограничено, если есть неточности в тексте, сообщите, пожалуйста!


Категории