️ Vida Loca
фишка вот в чем. может не быть пересадок, может быть 1 или 2
️ Vida Loca
и надо чтобы между ними была полоска
️ Vida Loca
примерно как на скрине
️ Vida Loca
или как вот тут вот
️ Vida Loca
️ Vida Loca
ну вот видишь там MOW AER? нужно чтобы было
MOW —---------- AER
️ Vida Loca
если, например, три сегмента пути то
MOW —--- BKK —---— AER
️ Vida Loca
если 4 то
MOW —---— BKK —---— BCN —---— AER
️ Vida Loca
я хотел сделать просто полоску через весь этот блок, и z-index'ом сделать текст поверх нее
Anonymous
Вообще, получается, вложенный текст должен быть в блоке
А этому блоку либо псевдоэлемент включать и на всю ширину отрисовывать бордер-топ, например, либо еще один внутренний блок-линия
️ Vida Loca
напиши раз хотел
️ Vida Loca
️ Vida Loca
потому что там такая сложность еще есть, что я заранее не знаю сколько у меня будет сегментов
Anonymous
я хотел сделать просто полоску через весь этот блок, и z-index'ом сделать текст поверх нее
Про opacity это не шутка была) С контекстом наложения часто проблемы бывают, когда структура сложная. Даже бывает с дочерним fixed-позиционированием такие плоблемы - аналогично, контекст. И который можно обнулить тоже неочевидно - transform: translate3d(0,0,0);
️ Vida Loca
то есть, я смотрю что мне пришло с сервера, если 2 сегмента, то я пилю блоки
.col-xs-6
.col-xs-6
три
.col-xs-4
.col-xs-4
.col-xs-4
четыре
.col-xs-3
.col-xs-3
.col-xs-3
.col-xs-3
️ Vida Loca
я не совсем понял :) можешь пример запилить?
Anonymous
то есть, я смотрю что мне пришло с сервера, если 2 сегмента, то я пилю блоки
.col-xs-6
.col-xs-6
три
.col-xs-4
.col-xs-4
.col-xs-4
четыре
.col-xs-3
.col-xs-3
.col-xs-3
.col-xs-3
Вот в этих самых col-xs можно отрисовывать внутренний див, отцентровать его, растянуть на width:100% и отрисвовать border-bottom: 2px solid #000;
Anonymous
Хотя нет, там же отступ между колонками
Anonymous
Сложные вы какие-то. Я только проснулся
Anonymous
Что за :not?
️ Vida Loca
спасибо
️ Vida Loca
"не такой-то элемент" типа "не первый элемент"
️ Vida Loca
️ Vida Loca
ок
️ Vida Loca
вот в паддинге как-то можно нарисовать?
️ Vida Loca
было бы проще всего)
️ Vida Loca
чтобы именно в падинге была полоска
Anonymous
А, вспомнил
Anonymous
чтобы именно в падинге была полоска
https://jsfiddle.net/hvzrmrsk/
У тебя же между колонками отступы и подобное не провернуть?
️ Vida Loca
похоже что не провернуть (
️ Vida Loca
️ Vida Loca
в принципе, их убрать можно
️ Vida Loca
ага, но я же могу навесить на сегменты класс, который будет убирать паддинги
Anonymous
ага, но я же могу навесить на сегменты класс, который будет убирать паддинги
а так? https://jsfiddle.net/hvzrmrsk/1/
️ Vida Loca
сек, первый вариант пока пробую
️ Vida Loca
он на самом деле больше нравится
️ Vida Loca
надежнее выглядит
Anonymous
Ну второй вариант тоже вполне себе
️ Vida Loca
уговорил) щас попрбую
Anonymous
️ Vida Loca
там паддинг, а не марджин
️ Vida Loca
нууу как-бы так себе получилось
️ Vida Loca
️ Vida Loca
я может конечно не все равильно сделал
️ Vida Loca
не очень что линия идет насквозь (начинается до первого сегмента AER), но это терпимо
️ Vida Loca
непонятно почему линия при width: 100% вылезает за пределы блока
️ Vida Loca
Anonymous
не очень что линия идет насквозь (начинается до первого сегмента AER), но это терпимо
Чтобы она насквозь не шла, нужно текст расширить, например display:block для текста, он станет на ширину родительского блока, и в итоге этот блок будет перекрывать линию
Anonymous
Тогда будет как на жсфидл, в примере
️ Vida Loca
нет такого
️ Vida Loca
Чтобы она насквозь не шла, нужно текст расширить, например display:block для текста, он станет на ширину родительского блока, и в итоге этот блок будет перекрывать линию
с дисплэй блок для текста, появляется много пустого места, тогда линия рисуется ток в паддингах
️ Vida Loca
колонка бутстрапа
️ Vida Loca
.col-xs-6
— a(href="#") MOW
️ Vida Loca
️ Vida Loca
ну в общем пока вот так получилось
️ Vida Loca
слева можно убрать поставив паддинг
️ Vida Loca
а справа почему-то линия выходит за блок
️ Vida Loca
да нет же) у кого? у родителя?)
️ Vida Loca
я убрал, все равно так же
️ Vida Loca
тем более в row там ток внешний контейнер завернут
️ Vida Loca
не прямой родитель
️ Vida Loca
️ Vida Loca
странно, computed показывает что линия шириной 210px
️ Vida Loca
типа такой же как и обертка
️ Vida Loca
а по факту больше
️ Vida Loca
️ Vida Loca
ровно на ширину паддинга следующего элемента получается линяя длинее чем нужно
Murat
а можешь выложить куда нибудь, посмотреть?
️ Vida Loca
http://np-9.ru:8899/ru/avia/tickets/ru/prg
Anonymous
Вебинар деваки. Погнали: https://devaka.ru/webinars/transition-function
️ Vida Loca
собственно вот
️ Vida Loca
ну я вроде как и хочу чтобы оно на всю ширину блока было :) или я что-то не так делаю?
️ Vida Loca
а слева тогда почему учитывает?
️ Vida Loca
и как сделать? в пикселях не вариант указывать
Murat
left: 0 укажи
️ Vida Loca
️ Vida Loca
под мобилки инчае сломается
Murat
эм