Вертикальная линия

@Small_17 · Регистрация: 19.11.2018

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

Приветствую! Проблема у меня такая: хочу нарисовать вот такую линию слева, при этом, вот эти значки - картинки. Всё замечательно получилось, кроме этой линии, не понимаю как её нарисовать. Пытаюсь нарисовать рядом с текстом, но она получается по высоте текста, если увеличиваю высоту линии, то все остальные строки разъезжаются, помогите, пожалуйста.

@Oldshelf · 20.11.2018, 12:58

Что, если сделать таблицей? Две колонки, в левой бэкграундом картинка с линией, с повтором по вертикали. Поверх нужных горизонтальных ячеек слева добавить значки копирайта.

Qwerty_Wasd · 20.11.2018, 13:09

Oldshelf,

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

Что, если сделать таблицей?

Прикольно )) Первое о чем подумал. Правда css-вариант.

Small_17, - https://codepen.io/qwerty_wasd/pen/yQPxvJ

HTML5
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
<div class="module-table-wrap">
  <div class="row-item">
    <div class="column-item">С</div>
    <div class="column-item">Алло</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Алло, алло, алло</div>
  </div>
  <div class="row-item">
    <div class="column-item">С</div>
    <div class="column-item">Привет</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Привет, привет, привет</div>
  </div>
  <div class="row-item">
    <div class="column-item">С</div>
    <div class="column-item">Как дела</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Как дела, как дела, как дела</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
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
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.module-table-wrap {
  display: table;
}
.module-table-wrap > .row-item {
  display: table-row;
}
.module-table-wrap > .row-item:nth-of-type(even) {
  height: 100px;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
  border: 2px solid #000000;
  border-radius: 50%;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: "";
  height: 104px;
  width: 3px;
  background: black;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
  font-weight: 500;
  font-size: 30px;
}
.module-table-wrap > .row-item:nth-last-child(2) > .column-item:first-child:after {
  content: none;
}
.module-table-wrap > .row-item > .column-item {
  display: table-cell;
  position: relative;
  height: 30px;
  vertical-align: middle;
  padding-left: 20px;
}
.module-table-wrap > .row-item > .column-item:first-child {
  width: 30px;
}

@Small_17 · 20.11.2018, 13:49 **[ТС]**

Qwerty_Wasd, всё супер, но эти значки не являются ведь картинками, можете, пожалуйста, объяснить, как такое же с картинкой сделать?

Qwerty_Wasd · 20.11.2018, 14:06

Small_17, бекграунд для

CSS
1
&:nth-child(2n+1) > .column-item:first-child

https://codepen.io/qwerty_wasd/pen/yQPxvJ

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
*,
*:after,
*:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  outline: 0;
}
 
/*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
.module-table-wrap {
  display: table;
}
.module-table-wrap > .row-item {
  display: table-row;
}
.module-table-wrap > .row-item:nth-of-type(even) {
  height: 100px;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
  border-radius: 50%;
  padding: 0;
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  background: url(https://stickerboom.ru/files/2012/03/26/454x5f1a-300x300.png) no-repeat center;
  background-size: cover;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
  position: absolute;
  top: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  content: "";
  height: 104px;
  width: 3px;
  background: black;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
  font-weight: 500;
  font-size: 30px;
}
.module-table-wrap > .row-item:nth-last-child(2) > .column-item:first-child:after {
  content: none;
}
.module-table-wrap > .row-item > .column-item {
  display: table-cell;
  position: relative;
  height: 30px;
  vertical-align: middle;
  padding-left: 20px;
}
.module-table-wrap > .row-item > .column-item:first-child {
  width: 30px;
}

@Small_17 · 20.11.2018, 19:20 **[ТС]**

Qwerty_Wasd, в песочнице всё, как надо. В браузере нет. Оставляю лишь Ваш код, но всё равно вижу следующее. Почему так? Объясните, пожалуйста

HTML5
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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <style>.module-table-wrap {
  display: table;
   
}
.module-table-wrap > .row-item {
  display: table-row;
}
.module-table-wrap > .row-item:nth-of-type(even) {
  height: 80px;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
background: url(https://forum-macan.ru/images/icons/123.png) no-repeat center;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
 position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        content: "";
        height: 80px;
        width: 3px;
        background: black;
}
.module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
  font-weight: 500;
  font-size: 30px;
}</style>
<div class="module-table-wrap">
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Алло</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Алло, алло, алло</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Привет</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Привет, привет, привет</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Как дела</div>
  </div>
  <div class="row-item">
    <div class="column-item"></div>
    <div class="column-item">Как дела, как дела, как дела</div>
  </div>
</div>
 
</body>
</html>

Qwerty_Wasd · 20.11.2018, 19:40

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

Почему так?

не все стили скопированы потому что.

PHP/HTML
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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE html>
<html lang="ru">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!--[if lt IE 9]>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
    <style>
    *,
    *:after,
    *:before {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
        outline: 0;
    }
    /*стили выше добавлены только для этого примера, в реальном проекте используйте normalize.css\reset.css*/
    
    .module-table-wrap {
        display: table;
    }
    
    .module-table-wrap > .row-item {
        display: table-row;
    }
    
    .module-table-wrap > .row-item:nth-of-type(even) {
        height: 100px;
    }
    
    .module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child {
        border-radius: 50%;
        padding: 0;
        text-align: center;
        font-size: 24px;
        font-weight: bold;
        background: url(https://stickerboom.ru/files/2012/03/26/454x5f1a-300x300.png) no-repeat center;
        background-size: cover;
    }
    
    .module-table-wrap > .row-item:nth-child(2n+1) > .column-item:first-child::after {
        position: absolute;
        top: 100%;
        left: 50%;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        content: "";
        height: 104px;
        width: 3px;
        background: black;
    }
    
    .module-table-wrap > .row-item:nth-child(2n+1) > .column-item:nth-child(2) {
        font-weight: 500;
        font-size: 30px;
    }
    
    .module-table-wrap > .row-item:nth-last-child(2) > .column-item:first-child:after {
        content: none;
    }
    
    .module-table-wrap > .row-item > .column-item {
        display: table-cell;
        position: relative;
        height: 30px;
        vertical-align: middle;
        padding-left: 20px;
    }
    
    .module-table-wrap > .row-item > .column-item:first-child {
        width: 30px;
    }
    </style>
</head>
 
<body>
    <div class="module-table-wrap">
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Алло</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Алло, алло, алло</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Привет</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Привет, привет, привет</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Как дела</div>
        </div>
        <div class="row-item">
            <div class="column-item"></div>
            <div class="column-item">Как дела, как дела, как дела</div>
        </div>
    </div>
</body>
 
</html>

Скрины хром, лиса, опера, сафари

@Small_17 · 20.11.2018, 19:49 **[ТС]**

Qwerty_Wasd, тогда почему в песочнице всё отображается? Извините, что надоедаю, разобраться просто хочу

Qwerty_Wasd · 20.11.2018, 19:54

Small_17, я предоставил Вам код страницы с примером и скрины в качестве пруфов - сравните со своей.

Вертикальная линия

Добавлено через 1 минуту

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

Qwerty_Wasd, тогда почему в песочнице всё отображается?

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

не все стили скопированы потому что.

Вами скопированы не все стили.

@Small_17 · 20.11.2018, 21:15 **[ТС]**

Qwerty_Wasd, ой, да, в самом деле, спасибо огромное!) Вы волшебник

Qwerty_Wasd · 20.11.2018, 21:42

Small_17, не за что, благодарю на добром слове, удачи

Новые блоги и статьи Все статьи Все блоги /
Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»	SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .

Вертикальная линия

Решение

Решение

@Small_17 0 / 0 / 0 Регистрация: 19.11.2018 Сообщений: 7

	Вертикальная линия 20.11.2018, 10:47. Показов 3948. Ответов 10 Метки нет (Все метки) Приветствую! Проблема у меня такая: хочу нарисовать вот такую линию слева, при этом, вот эти значки - картинки. Всё замечательно получилось, кроме этой линии, не понимаю как её нарисовать. Пытаюсь нарисовать рядом с текстом, но она получается по высоте текста, если увеличиваю высоту линии, то все остальные строки разъезжаются, помогите, пожалуйста. 0

@Oldshelf 36 / 27 / 10 Регистрация: 25.09.2018 Сообщений: 73
	20.11.2018, 12:58
	Что, если сделать таблицей? Две колонки, в левой бэкграундом картинка с линией, с повтором по вертикали. Поверх нужных горизонтальных ячеек слева добавить значки копирайта. 1

@Small_17 0 / 0 / 0 Регистрация: 19.11.2018 Сообщений: 7
	20.11.2018, 13:49 [ТС]
	Qwerty_Wasd, всё супер, но эти значки не являются ведь картинками, можете, пожалуйста, объяснить, как такое же с картинкой сделать? 0

@Small_17 0 / 0 / 0 Регистрация: 19.11.2018 Сообщений: 7
	20.11.2018, 19:49 [ТС]
	Qwerty_Wasd, тогда почему в песочнице всё отображается? Извините, что надоедаю, разобраться просто хочу 0

@Small_17 0 / 0 / 0 Регистрация: 19.11.2018 Сообщений: 7
	20.11.2018, 21:15 [ТС]
	Qwerty_Wasd, ой, да, в самом деле, спасибо огромное!) Вы волшебник 0

Qwerty_Wasd 2151 / 1496 / 651 Регистрация: 16.04.2016 Сообщений: 3,696
	20.11.2018, 21:42
	Small_17, не за что, благодарю на добром слове, удачи 0