Испытание: котогалерея на inline-block [32/32]

В общем, присоединяюсь к словам @Ineska, маргин слева у первого и четвертого обнули, плюсом маргин снизу у картинки убавь до 5px.

Коллеги, увы, печаль: сделаны все рекомендации, но “недолёт” - расхождение в неск. пикселей:http://codepen.io/E_Darek/pen/WQoZjj

Всё, отбой, догадалась, где баг.
100%
Спасибо за помощь!

Я правильно понимаю, что выравнивая галерею через text-align:center; задачу эту не решить? Картинки относительно образца пляшут, свести никак не удается.
Т.е. решение только жестко позиционировать первый и четвертый и задавать внешние отступы?

Хоть и поздно, но для остальных, думаю, полезно будет:smile:

Inline-block имеет свойство строчного поля и блока. Но тут нужно сделать акцент именно на строчном. Я сам не с самого начала въехал, поэтому решил попробовать донести до остальных “на пальцах”. Inline-block может принимать text-align, но берет он его от родителя. Т.е. выравнивание Вы должны задавать не в самом блоке, а в предыдущем. Как это можно еще объяснить. Возьмем тот же span:

<span> Текст </span>

Это строчный элемент. Для него можно задать text-align, но задавать Вы его будете не самому тексту, а как бы тегу , верно?

span {
text-align: center;
}

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

<span><div>Inline-Block</div></span>

т.е. Текст=<div>Inline-Block</div>;

В сетке, конечно же, нет span’a, но есть родительский блок <div>, назовем его “родитель”, тогда

<div class="родитель">
     <div class="inline-block">
          Inline-Block
     </div>
</div>

Так вот строчные свойства, такие как text-align нужно задавать <div class="родитель">, а вот блочные уже самому <div class="inline-block">.

А испытание и проходится с применением данного свойства, просто задавать его нужно не .item, а его родительскому блоку .gallery.

.gallery{
    font-size: 0px;
    padding-top:10px;
    text-align: center;
}
.gallery .item{
    display: inline-block;
    font-size: 12px;
    width:125px;
    margin:0 10px;
    margin-bottom:10px;
}
18 лайков

Очень хорошее объяснение.
Если бы каждый из приходящих на форум тоже писал своими словами то, что ему удалось понять…)
Спасибо)

2 лайка

Эм… А за что спасибо лично от Вас? Я так подозреваю, что Вы, уважаемая, куда более опытнее меня, ведь я занимаюсь первую неделю :slight_smile:

Как-то мне не нравится слово “уважаемая” в этом контексте, но ладно…
Спасибо за то, что внесли свою “лепту” так скажем. Вопросов на форуме бывает достаточно много. А тех, кто отвечает, можно на пальцах пересчитать.

Друзья, вопрос такого плана.
В теории про лишние пробелы у инлайн-блоков упоминалось три варианта решения проблемы: удаление пробелов, работа с маргинами и обнуление шрифтов.
Чем чреват для верстки способ с использованием “display: table;” ?

.gallery{
    padding-top:10px;
    /*font-size: 0;*/
    display: table;
    text-align: center;
}
.gallery .item{
    width:125px;
    margin:0 10px;
    margin-bottom:10px;
    text-align: left;
    display: inline-block;
    /*font-size: 12px;*/  

ЗЫ Проверка котогалереи с таким вариантом тоже на 100% проходит.

1 лайк

А можно весь код посмотреть? Интересно, не видела еще такого варианта.

Вот как-то так)

html, body{
        margin:0;
        padding:0;
    }
    body{
        width:450px;
        height:300px;
        font-family:'Arial', sans-serif;
        font-size:12px;
    }
    .gallery{
        padding-top:10px;
        /*font-size: 0;*/
        display: table;
        text-align: center;
    }
    .gallery .item{
        width:125px;
        margin:0 10px;
        margin-bottom:10px;
        text-align: left;
        display: inline-block;
        /*font-size: 12px;*/
    }
    .gallery .title{
        margin-bottom:5px;
        line-height:14px;
    }
    .gallery .frame{
        background:#ECF0F1;
        padding-top: 10px;
        border: 1px solid black;
    }
    .gallery .image{
        height:70px;
        background-position:50% 50%;
        background-repeat:no-repeat;
        border-top: 1px solid black;
        border-bottom: 1px solid black;
    }
    .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;
    }
3 лайка

Очень хороший пример) Причем высоту для body можно не писать.
Статья от Академии по поводу таблиц.

2 лайка

Статья отличная, спасибо за ссыль)

1 лайк

100%

html, body{
        margin:0;
        padding:0;
    }
    body{
        width:450px;
        height:300px;
        font-family:'Arial', sans-serif;
        font-size:12px;
    }
    .gallery{
        padding-top:10px;
        display: table;
        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 black;
        padding-top:10px;
        
    }
    .gallery .image{
        height:70px;
        background-position:50% 50%;
        background-repeat:no-repeat;
        border-top:1px solid black;
        border-bottom:1px solid black;
        ;
    }
    .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;
    }

Скажите, пожалуйста, для чего в коде пользователя 123 нужно было обнулять размер шрифтов?

Чтобы удалить пробелы у блочно-строчных элементов, из-за которых не получалось выровнять элементы как в образце.

Интересно, но исходя из этого испытания и погружения в inline-block выяснилось, что все не так однозначно, тот же text-align в родителе отвечает за положение блоков, а text-align в самом inline-block за положение текста в блоке. С другой стороны vertical-align можно задать только блокам с inline-block. В общем, никакого порядка)

Прошел испытание на 100% , но кажется слегка варварским методом, подскажите как более или упростить или улучшить код, не режет ли что то сильно глаза?

CSS

html,
body {
    margin: 0;
    padding: 0;
}

body {
    width: 450px;
    height: 300px;
    font-family: "Arial", sans-serif;
    font-size: 12px;
}

.gallery {
     font-size:0;
    padding-top: 10px;
}

.gallery .item {
    font-size:12px;
    display:inline-block;
    width: 125px;
    margin-left:18px;
    margin-bottom: 10px;
  
}
.item:nth-child(2)
{
    margin-right:2px;
   margin-left:20px;
    }
.item:nth-child(4)
{
    margin-right:2px;
   margin-left:90px;
    }

   
    
 

.gallery .title {
    
    margin-bottom: 5px;
    line-height: 14px;
}

.gallery .frame {
    
    padding-top:10px;
        border: 1px solid black;
    background: #ecf0f1;
}

.gallery .image {
    
    height: 70px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

.gallery .image-1 {
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #2ecc71;
    background-image: url("/assets/course13/cat_box.png");
}

.gallery .image-2 {
     border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #3498db;
    background-image: url("/assets/course13/cat_fish.png");
}

.gallery .image-3 {
     border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #f1c40f;
    background-image: url("/assets/course13/cat_purr.png");
}

.gallery .image-4 {
   
     border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #e67e22;
    background-image: url("/assets/course13/cat_walk.png");
}

.gallery .image-5 {
     border-top: 1px solid black;
    border-bottom: 1px solid black;
    background-color: #e74c3c;
    background-image: url("/assets/course13/cat_drunk.png");
}

.gallery .date {
    padding:5px;
    font-style: italic;
    font-size: 11px;
    color: #666666;
}

Есть кое-что…)
Отдельно второй и четвертый элемент выравнивать не надо.
В этой теме есть замечательный пост с объяснением этого момента от пользователя far100ker.
А в качестве упрощения кода вы можете рамку прописывать для .image, а не для каждой картинки в отдельности.

Ооой блин, с рамкой тупанул чего то, а про выравнивание спасибо, исправил все)

1 лайк