не получается задание пройти

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

не получается сделать последнее задание. час сижу и не пойму что не так. помогите плиз)

html, body{
    margin:0;
    padding:0;
}
body{
    width:450px;
    height:300px;
    font-family:'Arial', sans-serif;
    font-size:12px;
}
.gallery{
    padding-top: 10px;
    text-align: center;
}
.gallery .item{
    width:125px;
    margin: 0 10px;
    margin-bottom:10px;
    display: inline-block;
    text-align: left;
}
.gallery .title{
    margin-bottom:5px;
    line-height:14px;
}
.gallery .frame{
    background:#ECF0F1;
    border: 1px solid;
    padding-top: 10px;
}
.gallery .image{
    height:70px;
    background-position:50% 50%;
    background-repeat:no-repeat;
    border-top: 1px solid;
    border-bottom: 1px solid;

}
.gallery .image-1{
    background-color:#2ECC71;
    background-image:url('/assets/course13/cat_box.png');
}
.gallery .image-2{
    background-color:#3498DB;
    background-image:url('/assets/course13/cat_fish.png');
}
.gallery .image-3{
    background-color:#f1c40f;
    background-image:url('/assets/course13/cat_purr.png');
}
.gallery .image-4{
    background-color:#E67E22;
    background-image:url('/assets/course13/cat_walk.png');
}
.gallery .image-5{
    background-color:#E74C3C;
    background-image:url('/assets/course13/cat_drunk.png');
}
.gallery .date{
    color:#666;
    font-style:italic;
    font-size:11px;
    padding: 5px;
}

2

Испытание носит название "котогалерея на inline-block"
Пожалуйста, прочитайте теорию предыдущих курсов еще раз. Особенно этот
В котором про “пробелы” как раз и рассказывается.

Сам всегда пользуюсь - первым способом.
Родителю обнуляю шрифт, а инлайн-блокам восстанавливаю. По меньшей мере работает во всех популярных БРО.

1 лайк
3

Здравствуйте,
Подскажите, пожалуйста, почему следующий код не выравнивает текст по вертикали?

.gallery .date{
display:table-cell; /* Пробовал display:inline-block - тоже не работает */
vertical-align:middle;
padding-left:5px;
color:#666;
font-style:italic;
font-size:11px;
}

4

Приведённый код будет выравнивать текст по вертикали, если родителю задать display: table.

В случае inline-block элемент будут выравниваться по вертикали только относительно другого строчного или блочно-строчного элемента. Сам по себе один элемент по вертикали никак не выровнять.

И вопрос: а зачем в задании вам понадобилось выравнивание по вертикали? Блоку .gallery .date достаточно задать внутренний отступ и всё =)

1 лайк
5

точно, спасибо. надо же в родителе обнулить шрифты, а я в боди попробовал обнулить - не получилось. что-то я тупанул.

1 лайк
6

Попробуйте такую практику. Пользуюсь всегда, даже если видно что не будет инлайн-блоков, начинаю CSS с этого :smile:

.ibContainer {font-size:0;vertical-align:middle}
.ibItem {display:inline-block;line-height:1;vertical-align:middle;font-size: $font-size-base}
7

я просто обнулил шрифты у родителя, а элементу задал шрифт. тоже понравился этот способ:)

8

Я об этом и говорю, чтобы каждый раз не обнулять - придумайте себе 2 класса.
Первый - родитель инлайн блоков, второй - сам инлайн блок.

9

Да, согласен, но при задании внутреннего отступа сверху, блок увеличивается по высоте и приходится его править при помощи height. Ничего сложного, просто я думал, что можно сократить количество действий. А в случае, когда код занимает несколько страниц - приходится заниматься пиксель-хантингом?

10

Не-не, не стоит задавать фиксированную высоту. Можно обойтись в решении без хаков.

11

Всем доброго времени суток. Подскажите что не правильно? Визуально, у меня в браузере все идентично!

html, body{
margin:0;
padding:0;
}
body{
width:450px;
height:300px;
font-family:‘Arial’, sans-serif;
font-size:12px;
}
.gallery{
font-size: 0px;
padding-top:10px;
text-align: center;
}
.gallery .item{
display: inline-block;
width:125px;
margin:0 20px 0 0px;
margin-bottom:10px;

}
.gallery .item:nth-child(3n) {
margin-right: 0px;
}
.gallery .title{
font-size:12px;
margin-bottom:5px;
line-height:12px;
text-align: left;
}
.gallery .frame{
border: 1px solid black;
background:#ECF0F1;
}
.gallery .image{
height:70px;
background-position:50% 50%;
background-repeat:no-repeat;
border-top: 1px solid black;
border-bottom: 1px solid black;
margin-top: 10px;
}
.gallery .image-1{
background-color:#2ECC71;
background-image:url(’/assets/course13/cat_box.png’);
}
.gallery .image-2{
background-color:#3498DB;
background-image:url(’/assets/course13/cat_fish.png’);
}
.gallery .image-3{
background-color:#f1c40f;
background-image:url(’/assets/course13/cat_purr.png’);
}
.gallery .image-4{
background-color:#E67E22;
background-image:url(’/assets/course13/cat_walk.png’);
}
.gallery .image-5{
background-color:#E74C3C;
background-image:url(’/assets/course13/cat_drunk.png’);
}
.gallery .date{

color:#666;
font-style:italic;
font-size:11px;
text-align: left;
margin: 5px;

}

12

Кроме “Визуально, у меня в браузере все идентично!” есть вкладка “Различия”.
Уберите у title line-height: 12px; и четвертому элементу исправьте отступ слева.

1 лайк