В общем, присоединяюсь к словам @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 лайка
Эм… А за что спасибо лично от Вас? Я так подозреваю, что Вы, уважаемая, куда более опытнее меня, ведь я занимаюсь первую неделю 
Как-то мне не нравится слово “уважаемая” в этом контексте, но ладно…
Спасибо за то, что внесли свою “лепту” так скажем. Вопросов на форуме бывает достаточно много. А тех, кто отвечает, можно на пальцах пересчитать.
Друзья, вопрос такого плана.
В теории про лишние пробелы у инлайн-блоков упоминалось три варианта решения проблемы: удаление пробелов, работа с маргинами и обнуление шрифтов.
Чем чреват для верстки способ с использованием “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 лайк