ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / вертикальная линия
3 сообщений из 3, страница 1 из 1
вертикальная линия
    #39277216
tadeyiloda
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
tadeyiloda
Участник
есть 2 дива выровненные по горизонтали,дивы с рамками
как между ними вставить линию без добавления еще одного дива?
игрался с :after но криво работает, не получается линию отодвинуть от границы дива
...
Рейтинг: 0 / 0
20.07.2016, 16:44
| Ответить | Цитировать | Написать  
вертикальная линия
    #39277395
Фотография user89
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
user89
Участник
tadeyiloda,

 
Тут через before и градиент. Через градиент проще, но зависит от ситуации
Код: 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.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style>
#d1 {
  position:relative;
  height:100px; width:50px;
  border:1px solid #008200;
  z-index:0;
}
#d1:before {
  background-color:#4580B1;
  content:"";
  display:block;
  width:1px;
  height:100%;
  position:absolute;
  z-index: -1;
  top:0;
  left:calc(50% - 1px);
}
#d2 {
  position:relative;
  height:100px; width:50px;
  border:1px solid #008200;
  background:linear-gradient(to right, #fff 0, #fff 48%, #4580B1 49%, #4580B1 50%, #fff 50%, #fff 100%);
  /*background:linear-gradient(to right, #fff 0, #fff 24px, #4580B1 24px, #4580B1 25px, #fff 25px, #fff 100%); Если с процентами не пойдет, то раскомментировать для пикселей */
}
</style>
</head>
<body>
Через :before
<div id="d1">Текст</div>
<br>
Через градиент
<div id="d2">Текст</div>
</body>
</html>

...
Рейтинг: 0 / 0
20.07.2016, 22:56
| Ответить | Цитировать | Написать  
вертикальная линия
    #39277474
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
tadeyilodaесть 2 дива выровненные по горизонтали,дивы с рамками
как между ними вставить линию без добавления еще одного дива?
Много слов но тестового примера так и нет...
...
Рейтинг: 0 / 0
21.07.2016, 08:28
| Ответить | Цитировать | Написать  
3 сообщений из 3, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / вертикальная линия
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]