Как создать такой элемент ?

@Black_Star · Регистрация: 06.05.2016

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

Доброй ночи уважаемые. Подскажите, пожалуйста, как проще всего сделать такой элемент https://jsfiddle.net/9jkj50x1/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="block_welcome">
  <div class="block_welcome__images">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(1).png?raw=true" alt="img">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(3).png?raw=true" alt="img">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(2).png?raw=true" alt="img">
    <img class="block_welcome__img" src="https://github.com/BlackStar1991/Off-Site/blob/master/app/img/photos/picture_min%20(4).png?raw=true" alt="img">
  </div>
 
  <div class="block_welcome__mainText">
    <h2 class="block_welcome__title">Welcome to the site</h2>
    <p class="block_welcome__text">Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor.
      ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Duis autem vel Lorem ipsum Lorem ipsum dolor sit amet, uer uer Duis autem vel eum
      iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, consectetuer Lorem ipsum dolor sit amet, uer uer Duis autem vel eum iriure Duis autemvel eum iriure dolor. ipsum dolor sit amet, sectetuer.</p>
 
    <a href="#" class="block_welcome__link">more...</a>
  </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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
.block_welcome {
  width: 100%;
  min-height: 187px;
  margin-top: 15px;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.75);
  background-color: #fff;
}
 
.block_welcome__images {
  float: left;
  width: calc(100% *3 / 12);
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
 
.block_welcome__img {
  -webkit-flex-grow: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-flex-basis: 102px;
  -ms-flex-preferred-size: 102px;
  flex-basis: 102px;
}
 
.block_welcome__mainText {
  width: calc(100% * 9 / 12);
  margin-right: 0;
  padding-right: 0;
  padding-left: 14px;
  display: inline-block;
  border: 1px solid red;
}
 
.block_welcome__title {
  margin-top: 10px;
  height: 14px;
  color: #000;
  font-size: 18px;
  letter-spacing: 1px;
}
 
.block_welcome__text {
  position: relative;
  margin-top: 18px;
  padding-right: 14px;
  text-indent: 40px;
  min-height: 83px;
  font-size: 12px;
  color: #1f1f1f;
}
 
.block_welcome__link {
  float: right;
  margin-top: 6px;
  margin-right: 12px;
  width: 40px;
  height: 8px;
  color: #000;
  font-size: 12px;
  text-decoration: underline;
}

Не могу понять как эти "плиточки" сделать. Что б оно нормально перестраивалось при уменьшении экрана

@Evgeniy55 · 25.04.2017, 12:31

песочница: https://codepen.io/evgeniyprow... itors=1100

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="wrapper">
  <div class="block_1">
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
    <div class="picture"><img src="https://placehold.it/100x100"/></div>
  </div>
  <div class="block_2">
    <h2>Header</h2>
    <div class="text">
      <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia, excepturi aliquam vero laboriosam, eos fugiat quae saepe aperiam praesentium velit neque laborum incidunt. Sint porro, quam! Esse blanditiis recusandae optio ut expedita tenetur labore eos voluptatum laborum, vero culpa ex. Aspernatur culpa aperiam iusto consectetur ex neque fugiat similique, veritatis, ducimus, eos ipsam natus hic accusamus, cumque praesentium suscipit. Enim in ipsam suscipit porro assumenda distinctio neque nobis perspiciatis optio recusandae quam ex numquam, eos nulla molestias laborum est hic quaerat quidem, consectetur itaque excepturi laudantium voluptate eaque! Rem explicabo dolorum similique doloremque, recusandae, voluptatem non harum id, sit iure cumque est magnam et deleniti ipsa magni. In maxime magni vel laborum, officiis expedita quisquam et esse commodi ea quaerat totam, vero reiciendis nobis consequuntur perspiciatis. Consequuntur atque nihil sed adipisci aliquid sit, sequi corrupti aspernatur et officia maiores neque eos id cumque. Adipisci hic dicta doloribus tempora quis, placeat minus porro, nihil blanditiis deleniti rem magni cum quae! Omnis itaque officiis harum, ex officia porro dignissimos unde iusto perspiciatis, magni ut adipisci totam enim id tempora vel nam, eaque voluptatum accusamus nobis minus hic. Temporibus quidem omnis quo maiores ut debitis, quod odit ducimus, autem voluptates nulla voluptate eligendi!</p>
    </div>
  </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
* {box-sizing: border-box;}
 
.wrapper {
    max-width: 1200px;
    display: flex;
    margin: 30px auto 0;
    padding: 10px;
    border: 1px solid #ccc;
}
 
.block_1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    flex: 1 0 40%;
    margin: 0 10px 0 -10px;
}
 
.picture {
    padding: 0 0 0 10px;
}
 
h2 {
    padding: 0 0 25px;
    font-size: 24px;
    font-weight: bold;
}

Новые блоги и статьи Все статьи Все блоги /
Реалии 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. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .
Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .	Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.