Вёрстка витрины товаров

@maksmkv · Регистрация: 29.08.2012

Студворк — интернет-сервис помощи студентам

Всем привет. К сожалению не хватает знаний для реализации. ((( Есть картинка, взята с сайта http://www.offsnab.ru/kresla-p... irman.html - очень понравилась реализация. Помогите повторить. Только каждый блок это отдельный DIV, т.е. 1 для картикни, следующий для текста и еще 1 для цены, а вокруг всего этого рамки. Расположение на странице 4 в ряд СПАСИБО

Набросал, но знаний не хватает сделать дальше ((

HTML5
1
2
3
4
5
6
7
<div>
<table>
      <tr><th></th>IMG</tr>
      <tr class="price"><td>hello</td></tr>
      <tr><td></td></tr>
 </table>
 </div>

CSS
1
2
3
4
5
   table {border: 3px solid grey;}
   td, th {
        border: 1px outset grey;
        border-spacing: 5px;
      }

@MrHidalgo · 21.09.2016, 11:27

Самый примитивный варик:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="wrap">
  <div class="block-0"><img src="https://static.westwing.ru/glossary/uploads/ru/2015/09/%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D0%B5-%D0%BA%D1%80%D0%B5%D1%81%D0%BB%D0%BE-3.jpg"/>
    <h2 class="title">Title</h2>
    <p class="sub-title">Sub-title</p>
    <p class="price">Price <span class="price-count">3500</span> $</p>
  </div>
  <div class="block-1"><img src="https://static.westwing.ru/glossary/uploads/ru/2015/09/%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D0%B5-%D0%BA%D1%80%D0%B5%D1%81%D0%BB%D0%BE-3.jpg"/>
    <h2 class="title">Title</h2>
    <p class="sub-title">Sub-title</p>
    <p class="price">Price <span class="price-count">3500</span> $</p>
  </div>
  <div class="block-2"><img src="https://static.westwing.ru/glossary/uploads/ru/2015/09/%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D0%B5-%D0%BA%D1%80%D0%B5%D1%81%D0%BB%D0%BE-3.jpg"/>
    <h2 class="title">Title</h2>
    <p class="sub-title">Sub-title</p>
    <p class="price">Price <span class="price-count">3500</span> $</p>
  </div>
  <div class="block-3"><img src="https://static.westwing.ru/glossary/uploads/ru/2015/09/%D0%BA%D1%80%D0%B0%D1%81%D0%BD%D0%BE%D0%B5-%D0%BA%D1%80%D0%B5%D1%81%D0%BB%D0%BE-3.jpg"/>
    <h2 class="title">Title</h2>
    <p class="sub-title">Sub-title</p>
    <p class="price">Price <span class="price-count">3500</span> $</p>
  </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
* {
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}
 
.wrap {
  width: 100%;
  background: gray;
  padding: 15px 7.5px;
  display: flex;
}
.wrap div[class^='block-'] {
  width: calc(100% / 3);
  min-height: 100px;
  padding: 10px;
  margin: 0 7.5px;
  text-align: center;
  background: white;
}
.wrap div[class^='block-'] img {
  display: block;
  height: auto;
  max-width: 100%;
  border: 1px solid gray;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}
.wrap div[class^='block-'] p.price .price-count {
  color: red;
}

@maksmkv · 21.09.2016, 11:47 **[ТС]**

Это в каком-то редакторе так делается??? Если я парвилньо понял каждый блок-"кресло + текст" независим друг от друга? СПАСИБО

@MrHidalgo · 21.09.2016, 11:50

Сообщение от maksmkv

Это в каком-то редакторе так делается???

Да редакторов онлайн полно:

- codepen;
- jsfiddle;
- jsbin;
- plnkr;

Сообщение от maksmkv

Если я парвилньо понял каждый блок-"кресло + текст" независим друг от друга?

Именно так!

@mrtoxas · 21.09.2016, 12:10

MrHidalgo, Это не самый просто вариант, это "напихаю всего подряд". Вы используете flex и задаете ширину столбцов через calc (который, кстати, тут не сработал)? И зачем тут вообще flex?
И что это за радость такая?

CSS
1
.wrap div[class^='block-'] p.price .price-count{}

И где вы увидели в этом блоке параграф?

@MrHidalgo · 21.09.2016, 12:15

CSS
1
.wrap div[class^='block-'] p.price .price-count{}

Согласен это плохой вариант - была маленькая заготовка лишнее не прибрал (и да я не работаю с чистым css (по-этому как и большинству все равно что на выходе))

Сообщение от mrtoxas

(который, кстати, тут не сработал)

Да он не сработает - flex и так их поставит в row

Сообщение от mrtoxas

И где вы увидели в этом блоке параграф?

Что предлагаете?

@mrtoxas · 21.09.2016, 12:27

Вкладывать строчные элементы в строчные разрешается.

HTML5
1
2
3
4
5
6
7
8
9
<style>
  .item-price{
    color:blue;
  }
  .price{
    color:red;
  }
</style>
<span class="item-price">Price:<span class="price">100</span>$</span>

@MrHidalgo · 21.09.2016, 13:30

HTML5
1
<span class="item-price">Price:<span class="price">100</span>$</span>

Полностью согласен с Вами! (Сначала не о том подумал)

@maksmkv · 21.09.2016, 21:11 **[ТС]**

Буду все собирать теперь в кучу и прикручивать сортировку данных элементов. Просто изначально сайт делался на платформе ucoz и там много ограничений. Вот и приходиться колхозить.

Добавлено через 2 часа 42 минуты
А что это за конструкция class^='block-'] - в интернете не нашел такого описания

Добавлено через 59 секунд

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
* {
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}
 
.wrap {
  width: 100%;
  background: gray;
  padding: 15px 7.5px;
  display: flex;
}
.wrap div {
  width: calc(100% / 3);
  min-height: 100px;
  padding: 10px;
  margin: 0 7.5px;
  text-align: center;
  background: white;
}
.wrap div img {
  display: block;
  height: auto;
  max-width: 100%;
  border: 1px solid black;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}
  .price-count{
    color:red;
  }
  .price{
    color:green;
  }
}
 
Вроде тоже самое  получилось или я что-то сломал?

Добавлено через 26 минут
Скажите пожалуйста, если элементов будет более 4-х - как их расположить в столбец по 4 шт.? Спасибо

Добавлено через 41 минуту
Сделал так , но как-то не красиво получилось (((

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
.wrap {
  width: 100%;
  background: gray;
  padding: 15px 7.5px;
  display: inline-block;
}
.wrap div[class^='block-'] {
  width: calc(100% / 3);
  min-height: 100px;
  padding: 10px;
  margin: 0 7.5px;
  text-align: center;
  background: white;
}
.wrap div[class^='block-'] img {
  display: block;
  height: auto;
  max-width: 100%;
  border: 1px solid gray;
  box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
}
.wrap div[class^='block-'] p.price .price-count {
  color: red;
}
 
.block-0 
{
  float:left;
}
 
.block-1 
{
  float:left;
}
.block-3 
{
  float:left;
}
.block-4 
{
  float:left;
}
.block-5 
{
  float:left;
}
.block-6 
{
  float:left;
}
.block-7 
{
  float:left;
}

@MrHidalgo · 21.09.2016, 21:14

maksmkv, class^='block-' --> выборка класов которые начинаються на слово 'block-'
Селекторы атрибутов

...если элементов будет более 4-х...

- создаешь какой-то один общий класс для всех этих блоков и обращаешся к нему:

CSS
1
2
3
.wrap {attr} {
  float: left;
}

@Fedor92 · 21.09.2016, 21:38

MrHidalgo, не люблю я задавать лишних вопросов:

Сообщение от MrHidalgo

.wrap {attr}

но что это такое?

@MrHidalgo · 21.09.2016, 21:41

Fedor92, один общий класс для всех блоков {attr || class || elem || ...}

@Fedor92 · 21.09.2016, 21:46

Не по теме:

Сообщение от MrHidalgo

Fedor92, один общий класс для всех блоков {attr || class || elem || ...}

Либо я от жизни отстал, а можно небольшой пример(html+css), вот вместе со стилем из поста #10? Я просто раньше таких стилей не видел...

@BANO · 21.09.2016, 21:56

Не по теме:

Сообщение от MrHidalgo

один общий класс для всех блоков {attr || class || elem || ...}

Это невалидный css, а не "один общий класс".

@MrHidalgo · 21.09.2016, 21:57

Fedor92,

HTML5
1
2
3
.wrap
  - for(var i = 0; i < 10; i++)
    div(class='block-' + i)!= i

CSS
1
2
3
4
5
6
7
8
9
10
11
.wrap{
  text-align: center;
  overflow: hidden;
  
  [class^='block-'] {
    float: left;
    width: (100 / 4) * 1%;
    height: 30px;
    background: gray;
  }
}

@Fedor92 · 21.09.2016, 22:33

MrHidalgo,

Сообщение от BANO

Это невалидный css, а не "один общий класс".

Будьте внимательней когда пишите css правила... За меня уже Ваня ответил...

Новые блоги и статьи Все статьи Все блоги /
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly 8Observer8 24.01.2026 Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а привычная функция main(). . .	моя боль iceja 24.01.2026 Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .	Модель сукцессии микоризы anaschu 24.01.2026 Решили писать научную статью с неким РОманом	http://iceja.net/ математические сервисы iceja 20.01.2026 Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/

@maksmkv 3 / 3 / 1 Регистрация: 29.08.2012 Сообщений: 306
	21.09.2016, 11:47 [ТС]
	Это в каком-то редакторе так делается??? Если я парвилньо понял каждый блок-"кресло + текст" независим друг от друга? СПАСИБО 0

@MrHidalgo 11 / 11 / 2 Регистрация: 02.02.2016 Сообщений: 44
	21.09.2016, 21:41
	Fedor92, один общий класс для всех блоков {attr \|\| class \|\| elem \|\| ...} 0