Как иметь одинаковую высоту для элементов в CSS Grid

Я использую макет CSS-Grid и задаюсь вопросом, как установить одинаковую высоту для panel-heading элементов?

В частности, как и в строке ниже, я хотел бы, чтобы все разделы названий стран имели одинаковую высоту, тогда как раздел TotalContacts должен быть меньше по высоте.

введите здесь описание изображения

CodePen

https://codepen.io/ghazanfarmir/pen/ddNBEZ

body {
  padding: 30px;
}

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
}

.country .panel-heading {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="countries">
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/194/addresses" title="View Addresses">Abkhazia
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/1/addresses" title="View Addresses">Afghanistan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/258/addresses" title="View Addresses">Aland
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/2/addresses" title="View Addresses">Albania
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/3/addresses" title="View Addresses">Algeria
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/238/addresses" title="View Addresses">American Samoa
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/4/addresses" title="View Addresses">Andorra
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/5/addresses" title="View Addresses">Angola
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/223/addresses" title="View Addresses">Anguilla
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/6/addresses" title="View Addresses">Antigua and Barbuda
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/7/addresses" title="View Addresses">Argentina
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/8/addresses" title="View Addresses">Armenia
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/259/addresses" title="View Addresses">Aruba
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/262/addresses" title="View Addresses">Ascension
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/201/addresses" title="View Addresses">Ashmore and Cartier Islands
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/9/addresses" title="View Addresses">Australia
                                </a>
        </h4>
        <p>Total Addresses <strong>3</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>9</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/264/addresses" title="View Addresses">Australian Antarctic Territory
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/10/addresses" title="View Addresses">Austria
                                </a>
        </h4>
        <p>Total Addresses <strong>3</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/11/addresses" title="View Addresses">Azerbaijan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/12/addresses" title="View Addresses">Bahamas, The
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/13/addresses" title="View Addresses">Bahrain
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/239/addresses" title="View Addresses">Baker Island
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/14/addresses" title="View Addresses">Bangladesh
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/15/addresses" title="View Addresses">Barbados
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/16/addresses" title="View Addresses">Belarus
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/17/addresses" title="View Addresses">Belgium
                                </a>
        </h4>
        <p>Total Addresses <strong>1</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/18/addresses" title="View Addresses">Belize
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/19/addresses" title="View Addresses">Benin
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/224/addresses" title="View Addresses">Bermuda
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
  <div class="country panel panel-default">
    <div class="panel-heading text-center">
      <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
      <div>
        <h4><a href="/admin/countries/20/addresses" title="View Addresses">Bhutan
                                </a>
        </h4>
        <p>Total Addresses <strong>0</strong></p>
      </div>
    </div>
    <div class="panel-body">
      <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
    </div>
  </div>
</div>


html css css-grid
person Ghazanfar Mir    schedule 09.02.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Возможно, это не тот эффект, который вы ищете, но создание country элементов display:grid и установка строк на 1fr делают две секции одинаковой высоты.

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  display:grid;
  grid-template-rows: repeat(2, 1fr);
}

введите здесь описание изображения

body {
  padding: 30px;
}

.countries {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}

.countries .country {
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  margin-bottom: 0;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
}

.country .panel-heading {
  display: grid;
  grid-template-columns: 70px 1fr;
  align-items: center;
  grid-gap: 20px;
  grid-auto-rows: 1fr;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>

<body>
  <div class="countries">
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/194/addresses" title="View Addresses">Abkhazia
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/1/addresses" title="View Addresses">Afghanistan
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/258/addresses" title="View Addresses">Aland
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/2/addresses" title="View Addresses">Albania
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/3/addresses" title="View Addresses">Algeria
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/238/addresses" title="View Addresses">American Samoa
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/4/addresses" title="View Addresses">Andorra
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/5/addresses" title="View Addresses">Angola
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/223/addresses" title="View Addresses">Anguilla
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/6/addresses" title="View Addresses">Antigua and Barbuda
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/7/addresses" title="View Addresses">Argentina
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/8/addresses" title="View Addresses">Armenia
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/259/addresses" title="View Addresses">Aruba
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/262/addresses" title="View Addresses">Ascension
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/201/addresses" title="View Addresses">Ashmore and Cartier Islands
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/9/addresses" title="View Addresses">Australia
                </a></h4>
          <p>Total Addresses <strong>3</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>9</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/264/addresses" title="View Addresses">Australian Antarctic Territory
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/10/addresses" title="View Addresses">Austria
                </a></h4>
          <p>Total Addresses <strong>3</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/11/addresses" title="View Addresses">Azerbaijan
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/12/addresses" title="View Addresses">Bahamas, The
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/13/addresses" title="View Addresses">Bahrain
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/239/addresses" title="View Addresses">Baker Island
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/14/addresses" title="View Addresses">Bangladesh
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/15/addresses" title="View Addresses">Barbados
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/16/addresses" title="View Addresses">Belarus
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/17/addresses" title="View Addresses">Belgium
                </a></h4>
          <p>Total Addresses <strong>1</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>1</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/18/addresses" title="View Addresses">Belize
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/19/addresses" title="View Addresses">Benin
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/224/addresses" title="View Addresses">Bermuda
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
    <div class="country panel panel-default">
      <div class="panel-heading text-center">
        <div><i aria-hidden="true" class="fa fa-globe fa-5x"></i></div>
        <div>
          <h4><a href="/admin/countries/20/addresses" title="View Addresses">Bhutan
                </a></h4>
          <p>Total Addresses <strong>0</strong></p>
        </div>
      </div>
      <div class="panel-body">
        <div class="level"><span class="flex"><i aria-hidden="true" class="fa fa-phone"></i> Total Contacts <strong>0</strong></span> <span><i aria-hidden="true" class="fa fa-arrow-circle-o-right"></i></span></div>
      </div>
    </div>
  </div>
</body>

</html>

person Paulie_D    schedule 09.02.2018
comment
Спасибо Поли за помощь. Меня не устраивает высота раздела «Общие контакты». Он не должен быть слишком большим. - person Ghazanfar Mir; 09.02.2018
comment
Затем вам нужно объяснить, чего вы пытаетесь достичь ... это сделало в точности то, о чем вы просили до любого редактирования. - person Paulie_D; 09.02.2018
comment
Если вы пытаетесь выровнять высоту только верхних секций только, для этого НЕТ метода CSS ... вам понадобится javascript. - person Paulie_D; 09.02.2018