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

Я строю горизонтальную шкалу времени, используя абсолютно позиционированные divs.Горизонтальная временная шкала - Наложение перекрытий

Однако у меня возникает проблема, когда метки для каждого 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

источник

2017-02-22 user2085143

вы дали 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>

источник

2017-02-22 11:12:41

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

.timeline{ 
    display: table; 
} 

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

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

Обновлено plunker

источник

2017-02-22 11:13:44

Почти работает! Проблема в том, что у вас около 20 ярлыков, последние пять или шесть или около того будут иметь одинаковую ширину, независимо от того, что я думаю. – user2085143

Если у вас есть 20 ярлыков, какими должны быть ваши ширины ... Вы можете добавить пользовательские ширины в ячейки таблицы. Они просто не будут перекрываться, пока они составляют до 100%. –

Нравится [ссылка] (https://embed.plnkr.co/zvCaqqprUkVFNPlb6pdH/) –

Вы можете просто изменить свой 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%; 
}

источник

2017-02-22 11:18:49

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

ответ

Смежные вопросы