Как выровнять элементы inline-block по верхней границе контейнера

Многие разработчики сталкиваются с проблемой выравнивания элементов inline-block. Проблема в том, что когда высота нескольких div отличается, div с наименьшей высотой не выравнивается по верхней границе контейнера. Мы покажем решение этой проблемы с помощью CSS свойств.

1. Создайте HTML

  • Создайте <div> с классом "container".
  • Создайте два других span внутри "container". Первый div имеет название "small-box", а второй называется "big-box".
<div class="container">
  <span class="small-box"></span>
  <span class="big-box"></span>
</div>

2. Создайте CSS

  • Задайте height и width для классов.
  • Добавьте color, width и style к border.
  • Задайте background для блоков и установите display в значение inline-block, которое отображает элемент в виде блока с внутренней стороны, а с внешней стороны он отображается как строчный элемент.
.container { 
border: 1px solid #666666;
width: 350px;
height: 150px;    
}

.small-box{
display: inline-block;
width: 40%;
height: 30%;
border: 1px solid #666666;
background: #1c87c9;    
}

.big-box {
display: inline-block;
border: 1px solid #666666;
width: 40%;
height: 50%;
background: #8ebf42;    
}

Окончательный результат:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;    
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

Нашей проблемой является выравнивание .small-box по верхней границе контейнера.

Ключевое слово "top" свойства vertical-align поможет нам в этом вопросе.

Свойство vertical-align указывает вертикальное выравнивание строчного элемента. Значение "top" выравнивает верхний край элемента с верхней линией блока.

Необходимо применить его к .small-box только для того, чтобы он начинался сверху контейнера:

.small-box{ 
vertical-align: top;
}

Теперь наша проблема решена с помощью использования только одного CSS свойства. Давайте посмотрим код полностью.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      .container { 
      border: 1px solid #666666;
      width: 350px;
      height: 150px;    
      }
      .small-box{
      display: inline-block;
      width: 40%;
      height: 30%;
      border: 1px solid #666666;
      background: #1c87c9;  
      vertical-align:top;  
      }
      .big-box {
      display: inline-block;
      border: 1px solid #666666;
      width: 40%;
      height: 50%;
      background: #8ebf42;    
      }
    </style>
  </head>
  <body>
    <div class="container">
      <span class="small-box"></span>
      <span class="big-box"></span>
    </div>
  </body>
</html>

Рассмотрим пример, где высота одного из элементов div больше, чем высота остальных элементов <li>.

Пример, где произошла ошибка:

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      }
      ul li{
      display:inline;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Blue</span>
      </li>
      <li>
        <span id="box-two" class="normal">Green</span>
      </li>
      <li>
        <span id="box-three" class="normal">Grey</span>
      </li>
      <li>
        <span id="box-four" class="big">
        Как выровнять верхние границы всех цветных div.
        </span>
      </li>
    </ul>
  </body>
</html>

Нам просто необходимо заменить свойство display на свойство float со значением "left". Мы используем свойство float, которое в большинстве случаев используется вместе со свойством clear. Оно указывает, с каких сторон могут находиться плавающие элементы. В этом примере мы установили clear в "both". Это означает, что плавающие элементы запрещены с правой и левой стороны.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      }
      ul {
      display:block;
      clear:both;
      content:"";
      display: table;
      }
      ul li{
      float:left;
      list-style-type:none;
      }
    </style>
  </head>
  <body>
    <ul>
      <li>
        <span id="box-one" class="normal">Blue</span>
      </li>
      <li>
        <span id="box-two" class="normal">Green</span>
      </li>
      <li>
        <span id="box-three" class="normal">Grey</span>
      </li>
      <li>
        <span id="box-four" class="big">
          Как выровнять верхние границы всех цветных div.
        </span>
      </li>
    </ul>
  </body>
</html>

В следующем примере можно увидеть выравнивание элементов уровня inline-block, используя ключевое слово "flex" свойства display, которое используется с расширением -Webkit-.

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style>
      div{
      color:#ffffff;
      display:flex;
      display: -webkit-flex;
      align-items:flex-start;
      -webkit-align-items:flex-start;
      }
      #box-one {
      background-color: #1c87c9;
      }
      #box-two {
      background-color:#8ebf42;
      }
      #box-three {
      background-color: #cccccc;
      }
      #box-four {
      background-color: #666666;
      }
      .normal {
      height:100px;
      width:100px;
      display:inline-block;
      }
      .big {
      height:200px;
      width:200px;
      display:inline-block;
      padding:10px;
      }
    </style>
  </head>
  <body>
    <div>
      <span id="box-one" class="normal">Blue</span>
      <strong id="box-two" class="normal">Green</strong>
      <span id="box-three" class="normal">Grey</span>
      <span id="box-four" class="big">
      Как выровнять верхние границы всех цветных div.
      </span>
    </div>
  </body>
</html>