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


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