Выровнять текст под div на регулярных интервалах ширины

Question

Я создал угловую директиву, в которой пользователь может изменять определенные настройки в зависимости от времени суток. Ниже картина того, что у меня уже есть:

Я хотел бы добавить своего рода «тиков», которые точно представляют время на х-оси DIV, чтобы показать пользователю, что он делает, как на картинке ниже:

Они должны быть точными 1/24ths в DIV над ним. Я могу установить ширину div на фиксированное число, если это помогает. Я также хотел бы, чтобы ключевые моменты показывались как на картинке. Какой был бы лучший способ сделать это?

Answer 1

Я просто собираюсь перечислить теоретически, что может сработать, вам решать попробовать. Я хотел бы попробовать следующие шаги (мои решения не являются традиционными, но могу работать):

1. Для клещи, я мог бы попытаться добавить 24 раздельную букву «л» или капитал I (который когда-либо будет создавать клещ с пробелами между тем, установите высоту строки и шрифт на нужную длину, выделите соответствующие метки, а затем добавьте выравнивание текста: justify.

Или для более традиционного подхода вы можете пойти на строку с 24 столбцами каждая из 1/24-й ширины с использованием css, поплавок столбцов и добавление границы.

2. Для чисел я бы добавил еще одну строку div с числом столбцов, равным количеству времени, которое вы хотите показать-1, а последний столбец имеет дополнительное время для показа в правом углу.

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

Надеюсь, это поможет.

Answer 2

Flexbox будет работать здесь .. и верхний div может быть любого размера.

Просто добавьте обертку и определите ее ширину.

Codepen Demo

* { 
 
    box-sizing: border-box; 
 
} 
 
.parent { 
 
    display: flex; 
 
    flex-direction: column; 
 
    margin: 1em auto; 
 
    width: 80%; 
 
} 
 
.object { 
 
    width: 100%; 
 
    height: 150px; 
 
    background: pink; 
 
    display: flex; 
 
} 
 

 
.block { 
 
    width: 25%; 
 
    background: lightblue; 
 
} 
 
.ticks { 
 
    height: 15px; 
 
    display: flex; 
 
    justify-content: space-between; 
 
} 
 
.tick { 
 
    width: 2px; 
 
    height: 100%; 
 
    background: grey; 
 
    position: relative; 
 
} 
 

 
.tick.major { 
 
    background:red; 
 
    width:2px; 
 
    } 
 
.time { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
    font-size: 80%; 
 
}

<div class="parent"> 
 
    <div class="object"> 
 
    <div class="block"></div> 
 
    </div> 
 
    <div class="ticks"> 
 
    <div class="tick major"> 
 
     <div class="time">00:00</div> 
 
    </div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick major"> 
 
     <div class="time">06:00</div> 
 
    </div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick major"> 
 
     <div class="time">12:00</div> 
 
    </div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick major"> 
 
     <div class="time">18:00</div> 
 
    </div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick"></div> 
 
    <div class="tick major"> 
 
     <div class="time">00:00</div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 3

я обеспечиваю основную идею о том, как вы можете достичь своей цели

.time_interval,.line{ 
 
\t \t \t width:100%; 
 
\t \t } 
 
\t \t .line div{ 
 
\t \t \t color:#000; 
 
\t \t \t  float: left; 
 
\t \t \t  height: 5px; 
 
\t \t \t  width: 4%; 
 
\t \t \t  text-align:center; 
 
\t \t } \t 
 
\t \t .line .b{ 
 
\t \t \t font-weight:bold; 
 
\t \t \t color:red; 
 
\t \t } 
 
\t \t .timer div{ 
 
\t \t \t float: left; 
 
\t \t \t text-align:center; 
 
\t \t \t height: 5px; 
 
\t \t \t width: 4%; 
 
\t \t \t padding-top:15px 
 
\t \t } \t

<html> 
 
    <head> 
 
     <title>Test</title> 
 
\t 
 
    </head> 
 
    <body> 
 
\t <div class="line"> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div>|</div><div>|</div> 
 
\t \t <div class="b">|</div> 
 
\t </div> 
 
\t <div class="timer"> 
 
\t \t <div>00:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>06:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>12:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>18:00</div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div></div><div></div> 
 
\t \t <div>00:00</div> 
 
\t </div> 
 
    </body>  
 
</html>