Question

как сделать сетку, в ней картинки штуки 4 и чтобы они были ссылками типа как алиэкспресс? можно ли так сделать

Answer 1

Пример реализации можете найти в материале http://jsfiddle.net/4ma4jjfa/ картинки там уже сами можете завернуть в ссылки и сделать кликабельными.

Comments

а это будеть и для комп и для мобильного?

---

ЕВГЕНИЙ ДУДНИК,

Чтобы и для мобильного, тогда ширину 600px заменить на 100%

---

Yuri_Geruk,

http://scooterkuzbass.my1.ru/index/katalog/0-8 чето вот что получилось

---

Yuri_Geruk,

очень большие картинки.  я правильно понял я вставил коды и  css и  html?

---

ЕВГЕНИЙ ДУДНИК,

Вы вставили просто HTML код, а об CSS как я вижу вы вообще забыли, вставить нужно конечно же.

---

Yuri_Geruk,

я вставил сss  в самый вниз css посмотроите

---

ЕВГЕНИЙ ДУДНИК,

Вы хотя-бы скопировали бы в точности стили, вставили так:

$tablet: 'max-width: 400px'; // just for now. usually 1024
$mobile: 'max-width: 300px'; // just for now. usually 767
html{ 
 box-sizing:border-box;
 & * {
 box-sizing:inherit;
 }
}
img {
 max-width:100%; 
 height:auto;
}
#container {
 max-width: 100%;
 margin: 0 auto;
}
 .imgContainer{
 width: 100%;
 line-height: 0;
 font-size: 0;
 }

а должно же быть так:

$tablet: 'max-width: 400px'; // just for now. usually 1024
$mobile: 'max-width: 300px'; // just for now. usually 767
html{ 
    box-sizing:border-box;
    & * {
        box-sizing:inherit;
    }
}
img {
    max-width:100%; 
    height:auto;
}
#container {
    max-width: 100%;
    margin: 0 auto;

    .imgContainer{
        width: 100%;
        line-height: 0;
        font-size: 0;
    }

}

.image {
   display:inline-block;
    padding: 5px;
    width: 22.33%;
    @media (#{$tablet}){
        width: 50%;
    }
    @media (#{$mobile}){
        width: 100%;
    }
    img {
        vertical-align:top;
    }
}

---

Yuri_Geruk,

спасибки а скажите какого формата картинки должы быть

---

ЕВГЕНИЙ ДУДНИК,

Что вы подразумеваете под форматом?

---

Yuri_Geruk,

сколь на сколь пикселей картинка

---

ЕВГЕНИЙ ДУДНИК,

Без разницы (будет большая), она стилями уменьшается чтобы выглядела корректно.

---

Yuri_Geruk,

я стал вставлять картинки а они меньше

---

ЕВГЕНИЙ ДУДНИК,

Минимальные размеры картинок 216х148

---

Yuri_Geruk,

поставил эти размеры а она малень

---

ЕВГЕНИЙ ДУДНИК,

Ну да, а зачем ограничивать размеры, вы прописали код:

<img src="/slaider/shoprider_fast2.jpeg" style="width: 130px;height: 86px;">

выделил красным, этого там быть не должно, вот это и есть причина проблемы.

---

Yuri_Geruk,

я убрал и все равно

---

ЕВГЕНИЙ ДУДНИК,

Сколько можно напоминать о кеше браузера. Вы должны сами уже его чистить после любых изменений, без напоминаний.

---

Yuri_Geruk,

спасибо вам.  скажите а можно ли чтобы картинки были равномерно по всей стр а то с тел смотришь то справа еще много места остается...... и по крупнее может быть в 3 столбца

---

Yuri_Geruk,

подскажите пожал на выше вопрос

---

ЕВГЕНИЙ ДУДНИК,

Чтобы в 3 столца, замените стили width: 22.33%; на width: 33.33%;

---

Yuri_Geruk,

это в css да..............

---

Yuri_Geruk,

получилось 2 столбца а не 3

---

ЕВГЕНИЙ ДУДНИК,

Тогда 33 замените на 30

---

Yuri_Geruk,

ок а можно картинки растянуть по ширине на всю

---

ЕВГЕНИЙ ДУДНИК,

Допишите в стили в самый низ:

.image img { width: 100%; }
.imgContainer { margin-left: 40px; }