Как выровнять элементы 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>