ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 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):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&gotonew=1&tid=1445130]:
 0ms
get settings:
 9ms
get forum list:
 19ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 56ms
get topic data:
 9ms
get first new msg:
 5ms
get forum data:
 2ms
get page messages:
 37ms
get tp. blocked users:
 1ms
others: 249ms
total:  393ms
созд. / загр.: 393ms
x
x
Закрыть


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