30/32

Курсы §15. Сетки
1

Подскажите пожалуйста, зависла на последнем пункте задания

body{
font-size:16px;
font-family:'PT Sans', sans-serif;

}
h1{
margin:0;
margin-bottom:0.5em;
font-size:18px;
}
.container{
width:400px;
margin:20px auto;
}
.catalog{
width:400px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
}
.item{display: inline-block; margin-right: 10px;
width:116px;
min-height:75px;
margin-bottom:20px;
text-align:center;
background:#3498db;
color:white;
border:2px solid #2c3e50;
}
.item:nth-child(3n){margin-right: 0px;}

Снимок.JPG592×678 35.8 KB

2

А почему у вас вертикального выравнивания нет? И отступ справа только 10px?

3

это я пробовала по -разному, убрала…поставила, так вообще всё поехало, но задание прошла ???

body{
font-size:16px;
font-family:'PT Sans', sans-serif;

}
h1{
margin:0;
margin-bottom:0.5em;
font-size:18px;
}
.container{
width:400px;
margin:20px auto;
}
.catalog{
width:400px;
background:#ecf0f1;
box-shadow:0 0 3px #999;
}
.item{display: inline-block; margin-right: 20px; vertical-align: top;
width:116px;
min-height:75px;
margin-bottom:20px;
text-align:center;
background:#3498db;
color:white;
border:2px solid #2c3e50;
}
.item:nth-child(3n){margin-right: 0px;}

Снимок.JPG598×742 40.8 KB

4

аналогичная проблема . Предполагаю это из-за браузера

5

когда я в окне с html убрал все отбития между дивами класса item — сработало.
вот обсуждение проблемы https://habrahabr.ru/post/189118/

6

Что неправильно? http://prntscr.com/au1kqd

<!DOCTYPE html>
<html>
    <head>
       <title>float vs inline-block</title>
       <meta charset="utf-8">
       <link href="//fonts.googleapis.com/css?family=PT+Sans:400&subset=cyrillic" rel="stylesheet" type="text/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>                
        </div>
    </body>
</html>
body{
    font-size:16px;
    font-family:'PT Sans', sans-serif;
}
h1{
    margin:0;
    margin-bottom:0.5em;
    font-size:18px;
}
.container{
    width:400px;
    margin:20px auto;
}
.catalog{
    width:400px;
    background:#ecf0f1;
    box-shadow:0 0 3px #999;
}
.item{
    display: inline-block;
    width:116px;
    min-height:75px;
    margin-right: 20px;
    margin-bottom:20px;
    text-align:center;
    vertical-align: top;
    background:#3498db;
    color:white;
    border:2px solid #2c3e50;    
}
.item:nth-child(3){
    margin-right: 0px;    
}
7

Обнулить отступ надо у каждого третьего блока. У вас всего их шесть, и “третьих” два получается.

1 лайк
8

Тьфу ты, спасибо!

1 лайк
9

Аналогичная проблема, решил путем уменьшения маргина до 15.

11

Воспользовался box-sizing’ом

12

` Проблема в пробелах в Html коде. Так как элементы блочно строчные, то между ними учитываются пробелы. Чтобы решить данную проблему нужно изменить размер шрифта у catalog на 0px и добавить размер шрифта в класс .item.
Как-то так:

.catalog {
    ...
    ...
    font-size: 0px;
    ...
}

.item {
    ...
    ...
    font-size: 16px;
    ...
}