LisA
07.Апрель.2016 12:12:29
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;}
Ineska
07.Апрель.2016 12:18:51
2
А почему у вас вертикального выравнивания нет? И отступ справа только 10px?
LisA
07.Апрель.2016 12:38:52
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;}
аналогичная проблема . Предполагаю это из-за браузера
когда я в окне с html убрал все отбития между дивами класса item — сработало.
вот обсуждение проблемы https://habrahabr.ru/post/189118/
Что неправильно? 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;
}
Ineska
19.Апрель.2016 07:17:03
7
Обнулить отступ надо у каждого третьего блока. У вас всего их шесть, и “третьих” два получается.
1 лайк
Аналогичная проблема, решил путем уменьшения маргина до 15.
maclay
21.Июнь.2017 11:34:19
11
Воспользовался box-sizing ’ом
kandy
03.Июль.2017 17:34:28
12
` Проблема в пробелах в Html коде. Так как элементы блочно строчные, то между ними учитываются пробелы. Чтобы решить данную проблему нужно изменить размер шрифта у catalog на 0px и добавить размер шрифта в класс .item.
Как-то так:
.catalog {
...
...
font-size: 0px;
...
}
.item {
...
...
font-size: 16px;
...
}