Как реализовать вот такую верстку?

@DEStroyerll_ · Регистрация: 31.01.2018

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

Парни, всем привет! Подскажите как реализовать вот такую верстку.
Вот что у меня по верстке!

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="bapi-apartment-single__wraper-icons">
        <span class="bapi-apartment-single__icon-people"></span>
        <span class="bapi-apartment-single__icon-bad"></span>
        <span class="bapi-apartment-single__icon-bathtub"></span>
        <span class="bapi-apartment-single__icon-home"></span>
        <span class="bapi-apartment-single__icon-wifi"></span>
        <span class="bapi-apartment-single__icon-snowflake"></span>
        <span class="bapi-apartment-single__icon-swimming"></span>
        <span class="bapi-apartment-single__icon-parking"></span>
      </div>

И эти картинки я реализовал через CSS, вот как под них значения засунуть, незнаю

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
.bapi-apartment-single__wraper-icons {
        padding: 0 0 40px 0;
        .bapi-apartment-single__icon-people {
          background-image: url('#{$path}/apartment-single-page/group.png');
          background-repeat: no-repeat;
          background-position: center;
          width: 37px;
          height: 40px;
          display: inline-block;
          padding: 0 30px 0 0;
 
        }
        .bapi-apartment-single__icon-bad {
          background-image: url('#{$path}/apartment-single-page/bed.png');
          background-repeat: no-repeat;
          background-position: center;
          width: 37px;
          height: 40px;
          display: inline-block;
          padding: 0 30px 0 0px;
        }
        .bapi-apartment-single__icon-bathtub {
          background-image: url('#{$path}/apartment-single-page/bathtub.png');
          background-repeat: no-repeat;
          background-position: center;
          width: 37px;
          height: 40px;
          display: inline-block;
          padding: 0 30px 0 0px;
        }

@wwowa · 10.06.2019, 07:09

Можно вот так и уже div сделать inline-block....

HTML5
1
2
3
4
<div>
<span class="bapi-apartment-single__icon-people"></span>
<p>4</p>
</div>

Что не совсем правильно и как то убого, думаю.
Лучше сделать через псевдоклассы after или before.И отпозиционировать их абсолютно. А надпись маржинами. Тем паче, что размеры у вас заданы жестко.
Можно через figure сделать. Видимо проще всего получится.

@DEStroyerll_ · 10.06.2019, 10:34 **[ТС]**

wwowa, Да я не знаю...у меня эти значения должны быть динамическими. Вот моя верстка

HTML5
1
2
3
4
5
6
7
8
9
10
11
 
   <div class="bapi-apartment-single__wraper-icons">
        <span class="bapi-apartment-single__icon-people"></span>
        <span class="bapi-apartment-single__icon-bad"></span>
        <span class="bapi-apartment-single__icon-bathtub"></span>
        <span class="bapi-apartment-single__icon-home"></span>
        <span class="bapi-apartment-single__icon-wifi"></span>
        <span class="bapi-apartment-single__icon-snowflake"></span>
        <span class="bapi-apartment-single__icon-swimming"></span>
        <span class="bapi-apartment-single__icon-parking"></span>
      </div>

wwowa, А вот как сделать так как картинке, я не знаю ((

@AlexZaw · 10.06.2019, 11:26

DEStroyerll_, черновой пример:

HTML5
1
2
3
4
5
6
7
8
9
10
<div class="items">
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
  <div class="item"><img src="http://placekitten.com/30" alt=""><span>some text</span></div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
.items {
  display: flex;
}
.item {
  display: flex;
  margin: 10px;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}
span {
  margin-top: 20px;
}

@wwowa · 10.06.2019, 22:20

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

Да я не знаю...у меня эти значения должны быть динамическими

Ну вот выше приведенный пример вполне рабочий. Что значит динамические?? Какая разница? Что бы там не менять(рисунок или текст ) верстка то будет оставаться статической, как бы.

Новые блоги и статьи Все статьи Все блоги /
Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .	Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .
SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .	Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .

Как реализовать вот такую верстку?

Решение