Между двумя div вертикальная линия?

Question

[Имя Имечко]

Есть макет из 3 колонок.

[Колонка 1] [Колонка 2]
[ Колонка 3 ]

Была идея сделать дополнительный div между ними и задать ему border 1px, но кажется идея глупая.
Как сделать разделительную линию между колонками 1 и 2?

Comments

[Евгений Петров]

А чем обычный border не угодил? Что-то вы не договариваете...

Answer 1

[reifter]

Вообщем никак не получится поставить разделитель в 1px не затронув одну из колонок дописав ей border?

Используйте box-shadow для этих целей: box-shadow: inset -1px 0 0 red;
Пример: codepen.io/anon/pen/oXxraY

Comments

[Александр Зачиналов]

плохое решение для кроссбраузерности

[reifter]

Александр Зачиналов: это вы сейчас про какой браузер и какую версию? :)

[Александр Зачиналов]

IE8, Safari-iOS-6, Android 2.3 + косяки именно с параметром inset у Safari 7, iOS 7 Android 4-4.2 native... и даже краш всех стилей это свойство вызывало в версиях Хром до 38 если было перегружено или несло мультипараметры ([parametr1],[parametr2])

[Александр Зачиналов]

Методы прямого назначения класса или комбинаторики намного эффективнее

Answer 2

[Павел Радьков]

codepen.io/paulradzkov/pen/xGVvRq?editors=110 — Вертикальная линия между float-колонками разной высоты

Comments

[Евгений Петров]

Гораздо лучше для этого применить flex, а эмуляцию оставить только для старых IE.

[Павел Радьков]

Конечно, лучше

Answer 3

[Александр Зачиналов]

div {border-right: thin solid #ccc}
div:last-child {border-right: 0}

Comments

[Александр Зачиналов]

Альтернатива: пишите класс .with-devider: {border-right: thin solid #ccc} и присвойте его только первым двум блокам

[Александр Зачиналов]

Первый вариант IE9+, второй более универсальный

[Александр Зачиналов]

сорри за лол)) *divider

[Имя Имечко]

Получается я присваиваю [Колонка 1] border с правой стороны?

[Александр Зачиналов]

получается что так))

[Имя Имечко]

Ну до этого я и сам догадался. А нет более элегантного решения? =)
А то придется менять все цифры в классах, чтобы этот 1px в border встал ровно.

[Евгений Петров]

Саня: А box-sizing для чего придуман?)

[Евгений Петров]

Саня: https://developer.mozilla.org/ru/docs/Web/CSS/box-...
Позволяет указывать, к какой области применяется width и height.
По умолчанию content-box (область контента). Поставьте border-box и размеры будут считаться по внешней границе рамки элемента.

[Евгений Петров]

Александр Зачиналов: Можно воспользоваться и соседним комбинатором

div + div {
	border-left: 1px solid #ccc;
}

[Имя Имечко]

Вообщем никак не получится поставить разделитель в 1px не затронув одну из колонок дописав ей border?

[Александр Зачиналов]

Как всегда согласен)), Бог еще упас способ через :after,:before написать

[Александр Зачиналов]

для блока-серединки

[Александр Зачиналов]

Саня: для всех div пишите свойство box-sizing: border-box - Вам уже Евгений написал. Ставите и пишите бордеры, ничего не уедет

[Имя Имечко]

Вообщем решил сделать дополнительный div

[Имя Имечко]

Сделал еще проще. Просто увеличил ширину основного блока на 1px ))))))

[Евгений Петров]

Александр Зачиналов: Кстати, вариант с псевдоэлементами ИМХО весьма привлекателен. Особенно, учитывая косяк IE с flex (при min-height не работает позиционирование и размеры по вертикали).

При разной физической высоте колонок визуально можно сделать эту рамку на высоту контейнера. Ну, если не позиционировать сами колонки.

[reifter]

не пойму зачем такие извращения, когда можно box-shadow использовать?

[Евгений Петров]

reifter: Вы-таки считаете border извращением?) Любопытно. Весьма.
А тормозящий box-shadow, значит — самое лучшее и крутое решение. Любопытно, да...
И псевдоэлементы — также извращение?..

Описываю задачу — 3 колонки в макете с прижатым футером. Граница между ними должна быть по всей высоте контентной части. Покажите, как будете с помощью box-shadow решать?

Написали ответ с тенью, ну и написали. Вы решили убедить, что оно и есть самое верное?) Напрасно.

[reifter]

Евгений Петров: Про тормознуть меня конечно улыбнуло, вы действительно подсчитываете скорость при использовании box-shadow как бордюр? Покажите мне результаты моего способа и вашего бордюром? :) А если по делу то я использую то, что решает конкретную задачу, зачем мне решать совершенно иную задачу (которую вы привели) этим же способом?

[Евгений Петров]

reifter: Еу что же, демонстрирую codepen.io/cleric/pen/xGVvPr

[reifter]

Евгений Петров: для чего мне это? если вам нужно решение вот вам codepen.io/anon/pen/waGVxL

[Евгений Петров]

reifter: Вы категорично заявляете, что box-shadow круто-круто, называя формирование рамки за счёт border извращением... Рамку формировать тенью — вот это и есть наполовину извращение. А рамку делать рамкой — вполне нормально.

И ладно бы flex обсуждали, как это верно и хорошо — применять flex для колонок каркаса. Но вы тратите своё и моё время на обсуждение float. Скучно.

[reifter]

Евгений Петров: где я говорил, что "box-shadow круто-круто" это вы уже сами себе надумываете, вас походу просто задела фраза "извращение" вот и цепляетесь теперь за каждое слово.

[Евгений Петров]

reifter: Разницы нет особо никакой, но я не понял, зачем вы стали убеждать в извращённости применения border по сравнению с box-shadow.

[reifter]

Евгений Петров: под извращенностью я говорил про псевдоэлементы, в данном конкретном примере задачи для меня это извращенность.

[Евгений Петров]

reifter: Псевдоэлементы позволят легко и просто решить любые проблемы с границей.
Я описал уже реальную задачу, но вы обязательно хотите настоять на своём?

Answer 4

[Андрей Федоров]

Можно еще так. Закодирована картинка 1х1 пиксель.

.col-1 {
  background: 100%  repeat-y url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAAMSURBVBhXY/jPwAAAAwEBAGMkVdMAAAAASUVORK5CYII=);
}

Comments

[Serj-One]

Вот это уже извращение.

[Андрей Федоров]

) Дак в этой теме все так извращаются, чем я хуже. ) Вспомните историю про Нильса Бора на экзамене по физике. )

[Евгений Петров]

Андрей Федоров: А в чём остальные извращаются, позвольте спросить? Ладно бы, вы написали градиент, не вопрос. Но картинку кодировать в base64...

[Андрей Федоров]

А вы почитайте комменты к ответам... Относительно кодирования в base64, это кстати ускоряет загрузку сайта, серьезно.

Answer 5

[Ranwise]

Многоколоночный текст

Answer 6

[Максим Тимофеев]

Абсолютное позиционирование + hr