Как сделать линию между блоками css
Перейти к содержимому

Как сделать линию между блоками css

  • автор:

Как сделать такие линии между блоками?

введите сюда описание изображения

Нужно, чтобы по горизонтали и по вертикали блоки отделяла линия, вот так: Как это сделать? Я что-то не соображу.

Отслеживать

задан 1 июн 2017 в 10:28

1,777 16 16 серебряных знаков 33 33 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Это можно сделать с помощью псевдокласса :nth-child и псевдоэлементов :before и :after

#four-blocks < overflow: hidden; width: 580px; >#four-blocks .item < border: 1px #dededc solid; height: 232px; float: left; position: relative; width: 280px; >#four-blocks .item:nth-child(-n + 2) < margin-bottom: 13px; >#four-blocks .item:nth-child(-n + 2):before < content: ''; background: #F2F2F0; height: 1px; position: absolute; bottom: -8px; width: 100%; >#four-blocks .item:nth-child(2n + 1) < margin-right: 13px; >#four-blocks .item:nth-child(2n + 1):after

Отслеживать

ответ дан 1 июн 2017 в 14:36

3,768 2 2 золотых знака 16 16 серебряных знаков 36 36 бронзовых знаков

Как раз хотел сделать через них, но решение не приходило на ум. Спасибо.

1 июн 2017 в 15:16

Добрый день, я решил вашу задачу так, добавил в двух блоках по каждой еще две блоки. и дал им абсолютное позиционирование от родительского блока, после этого уже можем переместить их куда нам нужно. Нашими линиями будут блоки с классами item .

#four-blocks < width: 180px; >#four-blocks .item_cont < position: relative; width: 80px; float: left; margin-bottom: 11px; height: 80px; border: 1px #dededc solid; >#four-blocks .item_cont .item < position: absolute; background: #dededc; >#four-blocks .item_cont .item:nth-child(1) < width: 80px; height: 1px; >#four-blocks .item_cont .item:nth-child(2) < width: 1px; height: 80px; >#four-blocks .item_cont:first-child .item:nth-child(1) < bottom: -7px; >#four-blocks .item_cont:first-child .item:nth-child(2) < right: -7px; >#four-blocks .item_cont:last-child .item:nth-child(1) < top: -7px; >#four-blocks .item_cont:last-child .item:nth-child(2) < left: -7px; >#four-blocks < overflow: hidden; >#four-blocks .item_cont:nth-child(1), .item_cont:nth-child(3)

Как сделать адаптивную линию между блоками?

Есть блоки, стоящие в ряд с помощью флекса. Задача состоит в том, чтобы между ними сделать линии, которые уменьшаются вместе с экраном. Сами черточки делаю через ::after . Вариант с медиа запросами точно не подходит, слишком уж много раз их менять придется. Также проблема в том, что блоки по ширине разные и выставить значение ширины этим линия не получится.

 

Выписка
из ЕГРН

Возврат
НДФЛ

Согласование
перепланировки

Скидки
партнеров

Реферальная
система

  • Вопрос задан более двух лет назад
  • 692 просмотра

1 комментарий

Простой 1 комментарий

Тег


и кроссбраузерный отступ

Сколько себя помню, во время верстки я не особо любил использовать тег


, выводящий горизонтальную линию, по причине того, что в браузере Internet Explorer по сравнению с другими современными браузерами отступы (CSS-свойство margin ) отличаются. Не знаю, почему я раньше не задавался целью найти ответ на данный вопрос в виде кроссбраузерного решения, но недавно я все-таки сделал это. На одном из англоязычных форумов я нашел информацию, которая гласила о том, что Internet Explorer делает размер отступа к тегу


больше ровно на 7 пикселей, чем другие браузеры. Чтобы 100% убедиться в правдивости этих слов, я решил провести небольшой тест, который и подтвердил, что IE действительно добавляет к отступу от этого тега лишние ровно 7 пикселей.

Тест 1

Подготовлено специальное фоновое изображение с двумя линиями высотой в 7 пикселей и расстоянием между ними в 1 пиксель — место под линию, получаемую тегом


. Для наглядность я поместил линию в div , которому указал границу серого цвета:

div#hr

Задаем для тега


отступ сверху и снизу в размере 7 пикселей ( margin: 7px 0 ):

Результат в Opera, FireFox, Safari/Win: В Internet Explorer 6 и 7 мы видим совсем другую картину:

Тест 2

Теперь уменьшим отступ в браузере Internet Explorer на заявленные выше 7 пикселей путем создания дополнительного правила только для IE:

* html hr *+html hr 

В результате получаем одинаковый отступ у тега


во всех браузерах: Данный метод сработает также и в том случае, если задать для IE отрицательный отступ (на случай, когда в браузерах, отличных от IE, необходимо установить тегу


отступ меньше 7 пикселей). Таким образом, применив этот небольшой трюк, мы «укротили» Internet Explorer, заставив его правильно позиционировать тег


, аналогично другим браузерам. * * * Со временем мягкая мебель накапливает пыль, которая не под силу даже пылесосу. Услуга чистка мягкой мебели на дому поможет в такой ситуации избавиться от въевшейся пыли или грязных пятен.

Смотрите также

Зеленый свет CSS-свойствам при верстке под IE8 и выше

26 комментариев

Пришло время, и я наконец-таки решился отказаться от верстки под устаревший браузер Internet Explorer 7. Если это будет верстка на заказ, то вносить изменения под него буду только за дополнительную плату, а для своих проектов забуду вообще. .

Эмуляция псевдо-селектора :nth-child () в IE7 и IE8

13 комментариев

Неоднократно при верстке сайтов мне приходилось сталкиваться с ситуацией, когда строки в таблице или пункты вертикального списка необходимо было оформить зеброй. Т. е. одна строка, к примеру, с белым фоном, вторая с серым, третья опять .

Комментарии (26)

Здравствуйте уважаемый, интересует такой вопрос:
в чем заключается разница между «hr» и «hr /»? сюдаже:
a href=»ссылка»>
a href comments__item» >

Андрей, в соответствии с XHTML-стандартном все непарные теги должны содержать в конце слеш через пробел.

Лично я использую hr (хоть и редко) в качестве разделителя или пустого дива со стилем clear: both.
При этом, как правило я скрываю эту линию, а границы задаю дивам через border.
Что касается «высоты» hr, то выяснилось, что она в какой-то мере зависит от font-size текста, в котором находится. Так например, если задать hr однопиксельный font-size (и line-height для верности), то ненужные отступы исчезают.

CSS горизонтальная линия между блоками?

есть несколько блоков расположены сеткой по три колонки, хочу добавить горизонтальную между блоками.
border-bottom делает линию на всех блоках, а нужно что бы нижние блоки были без border-bottom, может как то можно вычислить последние три вхождения и отключить для них border-bottom?

  • Вопрос задан более трёх лет назад
  • 2316 просмотров

Комментировать

Решения вопроса 1

Altron8337 @Altron8337 Автор вопроса

class_div:not(:nth-child(-n+3))

Ответ написан более трёх лет назад

Нравится 1 2 комментария

delphinpro

Сергей delphinpro @delphinpro Куратор тега CSS

Еще вот такой вариант

.class_div:nth-child(3) ~ .class_div

Он вроде бы более понятный, но обладает большей специфичностью

AngReload

.class_div:nth-child(n + 4)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *