Горизонтальная временная шкала - перекрытие меток

Question

Горизонтальная временная шкала - перекрытие меток

Я строю горизонтальную шкалу времени, используя абсолютно позиционированные div.

Однако у меня возникла проблема, когда метки для каждого элемента div перекрываются, когда даты слишком близки друг к другу. Вы можете увидеть это в следующем Plunker (метка один и метка два перекрываются)

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

Мне нужно ввести какое-то поле, однако я не уверен, как это сделать, поскольку ширина будет создаваться динамически (на основе определенного значения даты)

Любой совет будет полезен!

HTML

<div class='timeline' style='width:100%;position:relative'>

      <div class='one timeline-milestone'>
        <div class='timeline-label'>
          Label One
        </div>
      </div>

      <div class='two timeline-milestone'>
        <div class='timeline-label'>
          Label Two
        </div>
      </div>

      <div class='three timeline-milestone'>
        <div class='timeline-label'>
          Label Three
        </div>
      </div>

      <div class='four timeline-milestone'>
        <div class='timeline-label'>
          Label Four
        </div>
      </div>
</div>

CSS

.timeline-milestone {
  height:10px;
  margin-bottom:20px;
  width:10%;
  text-align:right;
  position:absolute;
}

.one {
width:10%;  
}

.two {
width:15%;
}

.three {
width:50%;
}

.four {
  width:90%;
}

Plunker

https://plnkr.co/edit/fhff4V6Zo8ko2Sllv2DZ?p=preview

0

html css timeline

Источник

user2085143 22 фев '17 в 10:58

3 ответа

Другие вопросы по тегам html css timeline

user6787144 22 фев '17 в 11:13 2017-02-22 11:13 · Answer 1 · 2017-02-22 11:13

Добавьте следующий CSS:

.timeline{
  display: table;
}

.timeline-milestone {
  display: table-cell;
  height:10px;
  width: auto;
  text-align:right;
}

Преобразование его в таблицу гарантирует, что они никогда не пересекаются. Display:table и table-cell будут обрабатывать динамические ширины автоматически.

Обновлен плункер

user7510798 22 фев '17 в 11:18 2017-02-22 11:18 · Answer 2 · 2017-02-22 11:18

Вы можете просто изменить свой CSS и поставить это, и он никогда не будет наложения

/* Styles go here */



.timeline-milestone {
 height:10px;
 margin-bottom:20px;
 width:10%;
 text-align:right;
 position:absolute;
}

.one {
margin-left: 0%;
}

.two {
margin-left: 33.5%;
}

.three {
margin-left: 66.5%;
}

.four {
margin-left: 100%;
}

0

Источник

user7510798 22 фев '17 в 11:18

22 фев '17 в 11:12 2017-02-22 11:12 · Answer 3 · 2017-02-22 11:12

Вы дали 100% в основном блоке, а общий субблок должен быть ниже или равен 100%, если он превысит, попробуйте этот код..

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>

     <div  >
      <table style='width:100%;position:relative'>
        <tr>
          <td style='width:25%;position:relative'>
            <div>
        <div>
          Label One
        </div>
      </div>

          </td>
          <td style='width:25%;position:relative'>
             <div>
        <div>
          Label Two
        </div>
      </div>
          </td>
          <td style='width:25%;position:relative'>
            <div >
        <div >
          Label Three
        </div>
      </div>
          </td>
          <td style='width:25%;position:relative'>
            <div >
        <div >
          Label Four
        </div>
      </div>
          </td>
        </tr>

      </table>