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

Ineska · 27.Сентябрь.2015 19:27:52

Задайте внешний отступ слева отдельно для первого и четвертого элемента.

Ivan · 27.Сентябрь.2015 19:39:56

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

Elena_Darek · 28.Сентябрь.2015 19:53:13

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

Elena_Darek · 28.Сентябрь.2015 20:18:05

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

bob · 08.Январь.2016 21:37:36

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

far100ker · 06.Апрель.2016 10:43:33

Хоть и поздно, но для остальных, думаю, полезно будет: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;
}

Ineska · 06.Апрель.2016 11:18:13

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

far100ker · 06.Апрель.2016 19:35:38

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

Ineska · 06.Апрель.2016 19:42:08

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

yxta · 12.Апрель.2016 08:50:38

Друзья, вопрос такого плана.
В теории про лишние пробелы у инлайн-блоков упоминалось три варианта решения проблемы: удаление пробелов, работа с маргинами и обнуление шрифтов.
Чем чреват для верстки способ с использованием “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% проходит.

Ineska · 12.Апрель.2016 09:13:04

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

yxta · 12.Апрель.2016 09:36:42

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

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;
    }

Ineska · 12.Апрель.2016 09:56:57

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

yxta · 12.Апрель.2016 10:40:57

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

crazypushok · 15.Апрель.2016 06:39:14

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;
    }

Roma · 22.Апрель.2016 15:57:52

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

Ineska · 22.Апрель.2016 17:44:38

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

Valebas · 09.Август.2016 13:49:09

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

Poul · 10.Август.2016 22:48:55

Прошел испытание на 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;
}

Ineska · 11.Август.2016 05:43:53

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