Добавьте соединительные линии между гибкими элементами в начальной загрузке
Я создаю «дерево» в начальной загрузке 5, это должен быть список элементов, по которым можно что-то проследить, для этого я использую начальную загрузку 5 и необработанный HTML.
У меня для этого настроен HTML, как показано ниже;
Однако я хотел бы иметь линии между ними, как показано на следующем изображении;
Я попытался создать для этого собственный CSS, но что бы я ни делал, это поставило меня в тупик, и я не могу найти ничего об этом в документации по начальной загрузке.
HTML, обеспечивающий это, выглядит следующим образом:
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<br>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>Хм, это не присоединяется к ребенку-ребенку, попробую повозиться и посмотреть, что я смогу приготовить (что звучит странно, но это дерево навыков, так что менее странно)
—
24.02.2024 20:14
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
3
2
112
1
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 1
Ответ принят как подходящий
Вы можете иметь верхнюю границу для своих уровней, кроме первого, а затем вместо вашего brs создать div, который будет разделен на количество родителей, и каждое разделение будет разделено на два, с границами между ними. Это почти то, что вы хотели, мы можем еще улучшить это решение, добавив также уровень «до», но я думаю, что это уже хорошее подтверждение концепции.
.newline {
height: 30px;
width: 100%;
}
.pc-50 {
border-left: 1px solid blue;
width: 50%;
}
.newline:not(.lower) > div div:not(.outsider) {
border-bottom: 1px solid blue;
}
.pc-33 {
width: 33.33%;
}
.pc-20 {
width: 20%;
}
.pc-50.left {
border-left: none;
}<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel = "stylesheet"/>
<div class = "d-flex justify-content-around first">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class = "d-flex newline">
<div class = "d-flex pc-50 left">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50 left"></div>
</div>
<div class = "d-flex pc-50">
<div class = "pc-50 left"></div>
<div class = "pc-50 left outsider"></div>
</div>
</div>
<div class = "d-flex newline lower">
<div class = "d-flex pc-50 left">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50"></div>
</div>
<div class = "d-flex pc-50 left">
<div class = "pc-50 left"></div>
<div class = "pc-50 outsider"></div>
</div>
</div>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class = "d-flex newline">
<div class = "d-flex pc-50 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50 left"></div>
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-50 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider d-flex">
<div class = "pc-50 left"></div>
<div class = "pc-50 left outsider"></div>
</div>
</div>
</div>
<div class = "d-flex newline lower">
<div class = "d-flex pc-50 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50"></div>
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-50">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider d-flex left">
<div class = "pc-50 left"></div>
<div class = "pc-50 outsider"></div>
</div>
</div>
</div>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class = "d-flex newline">
<div class = "d-flex pc-33 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50 left"></div>
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider d-flex">
<div class = "pc-50 left"></div>
<div class = "pc-50 left outsider"></div>
</div>
</div>
</div>
<div class = "d-flex newline lower">
<div class = "d-flex pc-33 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50"></div>
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50">
</div>
<div class = "pc-50 outsider d-flex left">
<div class = "pc-50 left"></div>
<div class = "pc-50 outsider"></div>
</div>
</div>
</div>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class = "d-flex newline">
<div class = "d-flex pc-20 left">
<div class = "pc-50 left outsider">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider">
</div>
</div>
</div>
<div class = "d-flex newline lower">
<div class = "d-flex pc-20 left">
<div class = "pc-50 outsider left">
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider left ">
</div>
</div>
</div>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class = "d-flex newline">
<div class = "d-flex pc-50 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50 left"></div>
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-50 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider d-flex">
<div class = "pc-50 left"></div>
<div class = "pc-50 left outsider"></div>
</div>
</div>
</div>
<div class = "d-flex newline lower">
<div class = "d-flex pc-50 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50"></div>
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-50 left">
<div class = "pc-50">
</div>
<div class = "pc-50 outsider d-flex left ">
<div class = "pc-50 left"></div>
<div class = "pc-50 outsider"></div>
</div>
</div>
</div>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class = "d-flex newline">
<div class = "d-flex pc-33 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50 left"></div>
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider d-flex">
<div class = "pc-50 left"></div>
<div class = "pc-50 left outsider"></div>
</div>
</div>
</div>
<div class = "d-flex newline lower">
<div class = "d-flex pc-33 left">
<div class = "pc-50 left outsider d-flex">
<div class = "pc-50 left outsider"></div>
<div class = "pc-50"></div>
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-33 left">
<div class = "pc-50">
</div>
<div class = "pc-50 outsider d-flex left">
<div class = "pc-50 left"></div>
<div class = "pc-50 outsider"></div>
</div>
</div>
</div>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>
<div class = "d-flex newline">
<div class = "d-flex pc-20 left">
<div class = "pc-50 left outsider">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 outsider">
</div>
</div>
</div>
<div class = "d-flex newline lower">
<div class = "d-flex pc-20 left ">
<div class = "pc-50 left outsider">
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 ">
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 left">
</div>
<div class = "pc-50 left">
</div>
</div>
<div class = "d-flex pc-20 left">
<div class = "pc-50 ">
</div>
<div class = "pc-50 left outsider">
</div>
</div>
</div>
<div class = "d-flex justify-content-around">
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
<div class = "p-2 bd-highlight border border-primary">Flex item 1</div>
</div>Ох, вот это интригует... Знаете ли вы какой-нибудь способ остановить строки, проходящие за начало первого и последнего гибких элементов в строке?
—
24.02.2024 20:40
@CanO'Spam отредактировал мой ответ, убрав эти края. Если вы хотите то же самое, что и в вопросе, то вам понадобятся два уровня новой строки и нижняя граница к верхнему уровню и примените тот же шаблон (разделите экран на количество элементов и разделите каждое деление на два ). Если этот ответ решил вашу проблему, вы можете принять его как правильный ответ.
—
24.02.2024 20:59
Ты абсолютный герой! Я не могу тебя отблагодарить! CSS далеко не моя сильная сторона <3
—
24.02.2024 21:00
@CanO'Spam Я отредактировал фрагмент своего ответа, чтобы сделать синие линии более красивыми. Благодарность принадлежит моей жене, которая внесла улучшения, так как мне было лень их делать :)
—
26.02.2024 21:22
Другие вопросы по теме
Поместите желаемый цвет для заполнения прозрачных областей изображения в CSS
Измените данные d-атрибута элемента пути SVG, чтобы полученный путь был перевернут
Запускать анимацию каждый раз, когда она находится в области просмотра
Vue3 datepicker: отключить стрелки влево и вправо
У меня проблема с CSS! Когда я нажимаю на экран HTML, он просто подпрыгивает два раза, чего не ожидается
Равномерно расположить предметы в контейнере, запоминая их исходное положение
Почему некоторые элементы CSS не работают в Safari?
Столбцы не подстраиваются под размер окна во флексбоксе из-за изображений в них
Возникли проблемы с созданием многошаговой формы с помощью карусели Slick. Мне чего-то не хватает в моем JavaScript
Как создать функциональную кнопку «свет и тьма» с помощью JS?
Похожие вопросы
Поместите желаемый цвет для заполнения прозрачных областей изображения в CSS
Запускать анимацию каждый раз, когда она находится в области просмотра
У меня проблема с CSS! Когда я нажимаю на экран HTML, он просто подпрыгивает два раза, чего не ожидается
Используйте поля ввода HTML-формы с несколькими формами
Раскрывающийся список Flowbite не работает при использовании с *ngFor в Angular
Равномерно расположить предметы в контейнере, запоминая их исходное положение
XPath для элемента, имеющего только дочерние элементы с именем X?
Чат НЕ работает после перевода с Javascript на Pyscript
Как исправить заголовок на моем веб-сайте, созданный в R?
Почему некоторые элементы CSS не работают в Safari?
проверьте это, возможно, вам поможет codepen.io/Pestov/pen/AvQmxv