Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.59/34: Рейтинг темы: голосов - 34, средняя оценка - 4.59
0 / 0 / 0
Регистрация: 24.07.2011
Сообщений: 62

Двойная линия границы блоков div

12.03.2016, 12:33. Показов 7310. Ответов 10
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Добрый день, подскажите, как убрать двойную линию блоков div.


стиль border-collapse работает только для таблиц

вот пример https://jsfiddle.net/ghsx2m6w/
HTML5
1
2
3
4
5
6
7
<div id="block1">
1
</div>
 
<div id="block2">
2
</div>
CSS
1
2
3
4
5
6
7
#block1 {
 border: 1px solid #000;
}
 
#block2 {
 border: 1px solid #000;
}
Спасибо!
0
Лучшие ответы (1)
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
12.03.2016, 12:33
Ответы с готовыми решениями:

Пропадают границы блоков div при задании им свойств
Здравствуйте! Не знаю почему, но у меня, когда я создаю два блока без стиля внутри блока &quot;content&quot; бордеры нормально...

CSS. Границы двух блоков div заходят друг на друга
Друзья. Ниже есть скриншёт. САм код CSS: ...

Центрирование картинки в div, которая вылазит за границы div
Проблема: центрирование картинки в div, которая вылазит за границы div`а. Что можете посоветовать, у меня не получается. Картинки: 1...

10
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
12.03.2016, 12:37
Pepperok, конкретно в Вашем случае проще всего убрать нижнюю границу верхнего блока или верхнюю - нижнего:
CSS
1
#block1{border-bottom:none}
CSS
1
#block2{border-top:none}
0
0 / 0 / 0
Регистрация: 24.07.2011
Сообщений: 62
12.03.2016, 12:53  [ТС]
к сожалению так не получается, так как идет цикл. И получается иногда второй блок заполнен, а иногда нет.

Перевести все в table тоже не выход
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
12.03.2016, 13:32
Цитата Сообщение от Pepperok Посмотреть сообщение
к сожалению так не получается, так как идет цикл. И получается иногда второй блок заполнен, а иногда нет.
Не понял, что значит идёт цикл и как зависит граница от содержимого второго блока?
Есть же селекторы и псевдоклассы:
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
<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>example</title>
        <link href="style.css" rel="stylesheet" type="text/css"><!--подключаем файл стилей--> 
        <style>
div{border:1px solid; border-bottom:0}
div:last-child{border-bottom:1px solid}
            </style>
    </head>
    <body>
    <div id="block1">
1
</div>
 
<div id="block2">
2
</div>
<div id="block1">
1
</div>
 
<div id="block2">
2
</div>
<div id="block1">
1
</div>
 
<div id="block2">
2
</div>
    </body>
 </html>
0
0 / 0 / 0
Регистрация: 24.07.2011
Сообщений: 62
12.03.2016, 13:51  [ТС]
Спасибо Вам за ответ, но у меня такая цепочка получается

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
 <div id="block1">
1
</div>
 
<div id="block2">
2
</div>
<div id="block1">
1
</div>
 
<div id="block2">
 
</div>
<div id="block1">
1
</div>
 
<div id="block2">
2
</div>
<div id="block1">
1
</div>
 
<div id="block2">
 
</div>

и там где значение в block2 есть то линию нужно выводить , а там где нет не нужно. Поэтому и хотелось бы убрать двойную линию.



Еще раз спасибо Вам за ответ.
0
Эксперт HTML/CSS
 Аватар для Fedor92
2964 / 2621 / 1068
Регистрация: 15.12.2012
Сообщений: 10,091
Записей в блоге: 11
12.03.2016, 13:58
Цитата Сообщение от Pepperok Посмотреть сообщение
и там где значение в block2 есть то линию нужно выводить , а там где нет не нужно. Поэтому и хотелось бы убрать двойную линию.
Хорошо, а если так:
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
!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>главная страница</title>
        <link href="style.css" rel="stylesheet" type="text/css"><!--подключаем файл стилей--> 
        <style>
div{border:1px solid}
div:nth-child(odd){border-bottom:0}
div:last-child{border-bottom:2px solid}
            </style>
    </head>
    <body>
    <div id="block1">
1
</div>
 
<div id="block2">
2
</div>
<div id="block1">
1
</div>
 
<div id="block2">
2
</div>
<div id="block1">
1
</div>
 
<div id="block2">
2
</div>
    </body>
 </html>
0
Эксперт HTML/CSS
 Аватар для Shakalaka
653 / 556 / 322
Регистрация: 27.01.2015
Сообщений: 1,374
12.03.2016, 16:44
Лучший ответ Сообщение было отмечено Pepperok как решение

Решение

Цитата Сообщение от Pepperok Посмотреть сообщение
но у меня такая цепочка получается
Цитата Сообщение от Pepperok Посмотреть сообщение
и там где значение в block2 есть то линию нужно выводить , а там где нет не нужно.
Во-первых на странице не может быть 2 элементов с одинаковым id
Во-вторых css не знает о том пустой у вас блок, или с текстом, для этого нужно использовать js
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
 <div class="block1">
1
</div>
 
<div class="block2">
2
</div>
<div class="block1">
1
</div>
 
<div class="block2">
 
</div>
<div class="block1">
1
</div>
 
<div class="block2">
2
</div>
<div class="block1">
1
</div>
 
<div class="block2">
 
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
.block1 {
 border: 1px solid #000;
}
 
.block2 {
 border: 1px solid #000;
}
.no-border{
  border-top:0 none;
  border-bottom:0 none;
}
JavaScript
1
2
3
4
5
6
7
8
var divs = document.querySelectorAll("div[class^='block']");
console.log(divs.length);
for(var i = 0, l = divs.length; i < l; i++){
    
    if(divs[i].innerText == ""){
    divs[i].classList.add("no-border");
  }
}
https://jsfiddle.net/ghsx2m6w/2/
1
0 / 0 / 0
Регистрация: 24.07.2011
Сообщений: 62
15.03.2016, 12:19  [ТС]
Спасибо, Ваше решение подошло.
0
 Аватар для francz
13 / 13 / 10
Регистрация: 18.09.2012
Сообщений: 170
15.03.2016, 21:25
а если просто сделать отступы между div в 1px ?
CSS
1
2
3
4
5
6
7
.block1 {
margin: 1px 0;
}
 
.block2 {
margin: 1px 0;
}
0
 Аватар для Noiro
6 / 6 / 6
Регистрация: 16.03.2016
Сообщений: 38
16.03.2016, 04:53
Еще как мне кажется можно сделать для одного из блоков:
CSS
1
margin: -1px 0 0 0;
0
 Аватар для Kraken73
105 / 93 / 50
Регистрация: 17.09.2015
Сообщений: 612
16.03.2016, 16:58
а не проще так сделать?) и не делать много классов
https://jsfiddle.net/w2sLkzgy/
HTML5
1
2
3
4
5
6
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
<div class="logo"></div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.logo {
        width:100%;
        height:100px;
        border:1px solid red;
    }
    .logo:nth-child(n) {
 
    }
    .logo:nth-child(2n) {
       border-top:none; 
       border-bottom: none;
    }
    .logo:last-child {
        border-bottom:1px solid red;
    }
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
16.03.2016, 16:58
Помогаю со студенческими работами здесь

Как реализовать смещение div блоков под другой div?
Всем привет! Помогите сместить блоки под другой блок! &lt;div class=&quot;container&quot;&gt;&lt;div class=&quot;left-div left-text&quot;&gt;Drive business...

Размещение нескольких блоков div внутри другого блока div
Хочу сделать шапку веб-страницы. Прикреплю ниже небольшую схему того, как она будет выглядеть. Хочу текст разместить в левой части шапки с...

Линия после блоков
Имеется несколько блоков с фиксированной шириной, как сделать, чтобы после каждого блока отображалась горизонтальная линия на всю ширину,...

Как исправить границы блоков
Есть основной класс wrapper. Допустим у меня wrapper 900px. slider тоже 900px Когда ставлю outline, чтобы посмотреть- все красиво. ...

Не получается сделать границы для блоков
Здравствуйте, не получается сделать границы к блокам - браузер почему-то их не рисует. В чём может быть причина? вот код...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит переходные токи и напряжения на элементах схемы. . . .
Восстановить юзерскрипты Greasemonkey из бэкапа браузера
damix 15.01.2026
Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .
Сукцессия микоризы: основная теория в виде двух уравнений.
anaschu 11.01.2026
https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11
Jel 10.01.2026
WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .
Classic Notepad for Windows 11
Jel 10.01.2026
Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .
Почему дизайн решает?
Neotwalker 09.01.2026
В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru