- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<title>Простая сетка на inline-block</title>
<meta charset="utf-8">
<link rel="stylesheet" href="setting.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Каталог в три колонки</h1>
<div class="catalog">
<div class="item">Товар</div>
<div class="item">Товар</div>
<div class="item">Товар</div>
<div class="item">Товар</div>
<div class="item">Товар</div>
<div class="item">Товар</div>
<div class="item">Товар</div>
<div class="item">Товар</div>
</div>
</div>
</body>
</html>
CSS
h1 {
margin: 0;
margin-bottom: 0.5em;
font-size: 18px;
}
.container {
width: 400px;
margin: 20px auto;
}
.catalog {
width: 400px;
background-color: #ecf0f1;
box-shadow: 0 0 3px #999999;
}
.item {
width: 116px;
min-height: 75px;
margin-bottom: 20px;
text-align: center;
color: white;
background-color: #3498db;
border: 2px solid #2c3e50;
}
Вы перешли на другую страницу
ЗадачиВыполнено
0
- Задайте элементам с классом
.item
блочно-строчный тип, - маргин справа
20px
- и вертикальное выравнивание по верхнему краю.
- Затем обнулите маргин справа у каждого третьего
.item
.