Horizontale Zeitleiste - Labels Overlapping

Ich baue eine horizontale Zeitleiste mit absolut positionierten divs.Horizontale Zeitleiste - Labels Overlapping

Allerdings habe ich ein Problem, wo die Etiketten für jedes div überlappen, wenn die Daten zu eng zusammen sind. Sie können dies in dem folgenden Plunker sehen (Etikett ein und beschriften zwei Überlappung)

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

Ich brauche in einer Art von Marge zu setzen, aber ich bin nicht sicher, wie dies die Breite der tun gegeben wird erstellt dynamisch (basierend auf einem bestimmten Datumswert)

Jeder Rat wäre großartig!

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

Quelle

2017-02-22 user2085143

gab man 100% im Hauptblock und insgesamt Subblock shoul unterhalb oder gleich 100% sein, wenn es überschreitet, wird passieren, versuchen Sie diesen Code ..

<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>

Quelle

2017-02-22 11:12:41

Fügen Sie den folgenden CSS:

.timeline{ 
    display: table; 
} 

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

es zu einer Tabelle konvertieren wird dafür sorgen, dass sie nie überlappen. Die Anzeige: Tabelle und Tabellenzelle werden automatisch mit dynamischen Breiten arbeiten.

plunker Aktualisiert

Quelle

2017-02-22 11:13:44

arbeitet Fast! Problem ist, wenn Sie etwa 20 Etiketten haben, die letzten fünf oder sechs oder so werden am Ende die gleiche Breite sein, egal was ich denke. – user2085143

Wenn Sie 20 Beschriftungen haben, was sollen die Breiten sein? Sie können immer noch benutzerdefinierte Breiten zu den Tabellenzellen hinzufügen ... sie werden sich nur nicht überlappen, solange sie sich zu 100% addieren. –

So [link] (https://embed.plnkr.co/zvCaqqprUkVFNPlb6pdH/) –

Sie können Ihre CSS nur verändern, und diese setzen und es wird überlagern nie

/* 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%; 
}

Quelle

2017-02-22 11:18:49

Horizontale Zeitleiste - Labels Overlapping

Antwort

Verwandte Themen