#html #css #timeline
Вопрос:
Я пытаюсь создать временную шкалу, на которой точки соединены. Точки вещи 1 могут быть соединены с «точками» позже на временной шкале в строках вещи 2, 3 (в основном отчет, а затем ряд действий, связанных с ним). Мне было интересно, есть ли лучший способ сделать это, чем много позиций: абсолютных ?
* { box-sizing: border-box; } .container { width: 500px; height: 290px; background-color: #fff; position: relative; border: 1px solid #ddd; border-radius: 4px; } .circle { width: 12px; height: 12px; background-color: #dd35e7; position: absolute; border-radius: 50%; border: 2px solid #352; opacity: 0.7; } .circle--first { left: 70px; top: 50px; } .circle--second { left: 320px; top: 200px; background-color: red; } .circle--third { left: 120px; top: 50px; z-index: 30; } .circle--fourth { left: 370px; top: 100px; background-color: green; } .line { position: absolute; background-color: blue; opacity: 0.5; z-index: 100; } .line--first { left: 80px; top: 54px; width: 245px; height: 3px; background-size: 10px 2px; background-repeat: repeat-x; } .line--second { left: 325px; top: 56px; width: 2px; height: 145px; background-size: 2px 10px; background-repeat: repeat-y; } .line--third { left: 131px; top: 54px; width: 247px; height: 3px; background-size: 10px 2px; background-repeat: repeat-x; } .line--fourth { left: 375px; top: 56px; width: 3px; height: 45px; background-size: 2px 10px; background-repeat: repeat-y; } .axes { position: relative; } .axis { border-left-width: 1px; border-left-style: solid; position: absolute; z-index: 1; border-color: rgba(200, 200, 200, 0.8); height: 290px; } .labels { position: relative; width: 100%; } .date { position: absolute; float: left; top: 245px; width: 50px } lt;div class="container"gt; lt;div class="circle circle--first"gt; lt;/divgt; lt;div class="circle circle--second"gt;lt;/divgt; lt;div class="circle circle--third"gt;lt;/divgt; lt;div class="circle circle--fourth"gt;lt;/divgt; lt;div class="line line--first"gt;lt;/divgt; lt;div class="line line--second"gt;lt;/divgt; lt;div class="line line--third"gt;lt;/divgt; lt;div class="line line--fourth"gt;lt;/divgt; lt;div class="axes"gt; lt;div class="axis" style="left: 100px;"gt;lt;/divgt; lt;div class="axis" style="left:150px;"gt;lt;/divgt; lt;div class="axis" style="left:200px;"gt;lt;/divgt; lt;div class="axis" style="left:250px;"gt;lt;/divgt; lt;div class="axis" style="left:300px;"gt;lt;/divgt; lt;div class="axis" style="left:350px;"gt;lt;/divgt; lt;div class="axis" style="left:400px;"gt;lt;/divgt; lt;div class="axis" style="left:450px;"gt;lt;/divgt; lt;/divgt; lt;div class="labels"gt; lt;span style="left: 10px; top: 45px; position: absolute;"gt;Thing 1lt;/spangt; lt;span style="left: 10px; top: 95px; position: absolute;"gt;Thing 2lt;/spangt; lt;span style="left: 10px; top: 145px; position: absolute;"gt;Thing 3lt;/spangt; lt;span style="left: 10px; top: 195px; position: absolute;"gt;Thing 4lt;/spangt; lt;span class="date" style="left: 61px;"gt;Aug 2021lt;/spangt; lt;span class="date" style="left: 111px;"gt;Sep 2021lt;/spangt; lt;span class="date" style="left: 161px;"gt;Oct 2021lt;/spangt; lt;/divgt; lt;/divgt; Комментарии:
1. Абсолютная позиция для линий действий кажется мне приемлемой. Это проблема в вашем случае использования? Проблема заключается в использовании фиксированных единиц измерения (px), что делает вещь невосприимчивой. Это проблема в вашем случае использования?
2. Связаны ли другие вещи с Вещью 2 или Вещью 3 и т. Д. Так же, как они связаны с Вещью 1, или это всегда происходит от Вещи 1?
3. в принципе, они могут перейти на разные уровни. Но если кажется, что для создания всех абсолютных значений требуется много работы. Особенно если временная шкала растягивается на секунды, годы и т. Д., Но, возможно, это действительно лучший вариант
Ответ №1:
Один из способов не вычислять все абсолютные значения-заставить CSS сделать это за вас, поместив все в сетку.
Этот фрагмент устанавливает сетку с первым столбцом с подписями «вещи» и последней строкой в качестве месяцев.
Он использует элементы » до » и «после», чтобы провести линии между действиями (кругами) и тем, к которому они присоединены.
Это довольно простая схема, без знания полной структуры того, как могут быть объединены действия, трудно сказать, достаточно ли этого. Этого достаточно, чтобы мы могли нарисовать график, указанный в вопросе, поэтому, надеюсь, это приведет к некоторым идеям для ситуации, когда действия могут быть объединены с несколькими другими видами деятельности. Это можно было бы сделать, сохранив метод drwawing линий (фоновые изображения, которые являются линейными градиентами), потому что вы можете иметь столько, сколько захотите, в одном объявлении фонового изображения.
.timeline, .timeline *, .timeline *::before, .timeline *::after { padding: 0; margin: 0; box-sizing: border-box; } .timeline { --timelineW: 100vw; --thingH: 10vmin; --numThings: 4; /* the things are in rows 1 to numTasks */ --Thing1: 1; --Thing2: 2; --Thing3: 3; --Thing4: 4; --numMonths: 4; /* the months are in columns 2 to (numMonths 1) */ --Sept: 2; --Oct: 3; --Nov: 4; --Dec: 5; width: var(--timelineW); display: grid; grid-template-columns: repeat(calc(var(--numMonths) 1), 1fr); grid-auto-rows: minmax(100px, auto); grid-auto-rows: var(--thingH); grid-gap: 0; } .thing { grid-column: 1; grid-row: var(--n); display: flex; justify-content: center; align-items: center; } .month { grid-row: calc(var(--numThings) 1); grid-column: var(--n); display: flex; justify-content: center; align-items: center; } .activity { background-image: radial-gradient(var(--bg) 0 50%, transparent 50% 100%); background-size: 5vmin 5vmin; background-repeat: no-repeat; background-position: center center; grid-column: var(--month); grid-row: var(--thing); height: var(--thingH); display: inline-block; position: relative; } .activity::before { content: ''; position: absolute; left: 50%; top: 0; width: calc((var(--joinMonth) - var(--month)) * (var(--timelineW) / (var(--numMonths) 1))); height: 100%; background-image: linear-gradient(transparent 0 calc(50% - 1px), blue calc(50% - 1px) calc(50% 1px), transparent calc(50% 1px) 100%); z-index: -1; } .activity::after { content: ''; position: absolute; left: calc((var(--joinMonth) - var(--month)) * (var(--timelineW) / (var(--numMonths) 1))); top: 50%; width: 100%; height: calc((var(--joinThing) - var(--thing)) * var(--thingH)); background-image: linear-gradient(to right, transparent 0 calc(50% - 1px), blue calc(50% - 1px) calc(50% 1px), transparent calc(50% 1px) 100%); z-index: -1; } .red { --bg: red; } .blue { --bg: blue; } .green { --bg: green; } lt;div class="timeline"gt; lt;div class="thing" style="--n: 1;"gt;Thing1lt;/divgt; lt;div class="thing" style="--n: 2;"gt;Thing2lt;/divgt; lt;div class="thing" style="--n: 3;"gt;Thing3lt;/divgt; lt;div class="thing" style="--n: 4;"gt;Thing4lt;/divgt; lt;div class="month" style="--n: var(--Sept);"gt;Septlt;/divgt; lt;div class="month" style="--n: var(--Oct);"gt;Octlt;/divgt; lt;div class="month" style="--n: var(--Nov);"gt;Novlt;/divgt; lt;div class="month" style="--n: var(--Dec);"gt;Declt;/divgt; lt;div class="activity blue" style="--month: var(--Nov); --thing: var(--Thing3)"gt;lt;/divgt; lt;div class="activity green" style="--month: var(--Dec); --thing: var(--Thing4)"gt;lt;/divgt; lt;div class="activity red" style="--month: var(--Sept); --thing: var(--Thing1); --joinThing: var(--Thing4); --joinMonth: var(--Dec);"gt;lt;/divgt; lt;div class="activity red" style="--month: var(--Oct); --thing: var(--Thing1); --joinThing: var(--Thing3); --joinMonth: var(--Nov);"gt;lt;/divgt;