2016-07-03 17 views
0

Okay, ich habe diese Struktur, die ich versuche, mit CSS zu erstellen, aber alle meine Versuche haben kein richtiges Ergebnis erbracht, ich habe versucht, im Internet nach Hilfe zu suchen, und einige Anleitungen zu Timeline-Strukturen gefunden, aber keine schien es zu tun was ich versuche zu tun.zentrierte HTML-Timeline-Struktur mit CSS? Mit nur den Seiten Skalierung?

So, hier ist das, was meine Grundstruktur ist: enter image description here

So, hier ist die Idee, dass die Fenster Auflösung 1800px in der Breite ist, und die Struktur ist einige div Container, die hellgrauen Hintergrund ist, dass irgendwie entweder eine zentrierte margin: 0 auto oder etwas anderes mit einer Menge von 1200px. Als Rückgrat der Seite dient dann die mittlere rote Zeitleiste, die zentriert ist und die gleiche eingestellte Breite behält, nicht ein Prozentsatz. Um die Zeitleiste herum befinden sich auf der linken und rechten Seite diese Tooltip-Boxen, die je nach Textmenge in der Höhe skaliert werden.

Als nächstes, wenn Sie die Fensterauflösung auf etwas wie 1000px in der Breite ändern, also kleiner als der hellgraue Bereich. Die mittlere Zeitleiste bleibt unverändert, aber die Tooltip-Felder ändern sich aufgrund des fehlenden horizontalen Raums in der Breite und in der Höhe, stattdessen wird der vertikale Platz verwendet. Die Tooltip-Boxen behalten die gleiche Entfernung von der Timeline, sagen wir von 15px, also müssen sie von beiden Seiten in der Breite abnehmen, und da renne ich in eine Wand. enter image description here

So wie ich es imagened ich war irgendwie für die Timeline aus Modulen bauen zu sein, wie unten dargestellt, so dass die Tooltips zu einem Teil der Timeline entsprechen würden, und Zeit-Linien dann mit Tooltips oben auf gestapelt werden würden gegenseitig. Aber jede Lösung geschätzt wird,

enter image description here

Hier ist ein Link zu dem, was ich bisher: http://codepen.io/anon/pen/wWZwGL

* { 
 
    margin: 0px; 
 
    font-family: sans-serif; 
 
} 
 

 
.timezone{ 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    padding: 5px 0; 
 
} 
 

 
.timezone > div { 
 
    display: inline-block; 
 
    box-sizing: border-box; 
 
} 
 

 
.timeline { 
 
    width: 100px; 
 
    background: darkred; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 50%; 
 
    transform: translateX(-50%); 
 
} 
 

 
.event_left { 
 
    margin-left: 1%; 
 
    width: calc(49% - 1% - 20px); 
 
    background: #ededed; 
 
    position: relative; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 

 
.event_right { 
 
    width: calc(45% - 1% - 30px); 
 
    background: #ededed; 
 
    margin-left: calc(2% + 40px); 
 
    position: relative; 
 
    vertical-align: middle; 
 
    padding: 10px; 
 
} 
 

 
.left { 
 
    width: 50%; 
 
    height: 100px; 
 
    float: left; 
 
} 
 

 
.right { 
 
    width: 50%; 
 
    height: 100px; 
 
    float: left; 
 
}
<div class="content"> 
 
    <div class="timezone"> 
 
    <div class="event_left">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div> 
 
    <div class="timeline">34.000 BNC</div> 
 
    <div class="event_right">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> 
 
    </div> 
 
</div>

wo ich versuche, die Tooltip Skalierung zu erreichen, es ist nicht annähernd perfekt, und die Timeline Höhe nicht einmal mit der QuickInfo Höhe anpassen :(

Irgendwelche Vorschläge?

+0

Ohne den Code zu schreiben, sind Sie müde, Ihre Frage scheint, als ob Sie uns bitten, das vollständig für Sie zu kodieren. – j08691

+0

Nein, was ich frage, ist, wenn wir ein zentriertes div haben, die Zeitleiste, mit dann einem linken div und einem rechten div auf beiden Seiten der Timeline, wenn die Bildschirmbreite in der Breite skaliert wird, wie skalieren sie automatisch mit das Zentrum div bleiben gesetzt.Alles andere sollte eine Vorstellung davon geben, wohin ich gehe, und das könnte einen Einfluss darauf haben, was die Leute antworten würden. –

+0

Um zu paraphrasieren, was ich im Text geschrieben habe: "Die Tooltip-Boxen behalten den gleichen Abstand von der Timeline, sagen wir von 15px, also müssen sie von beiden Seiten in der Breite abnehmen, und da renne ich in eine Mauer." Das ist mein Problem. –

Antwort

1

In Ermangelung des Rests des Codes, habe ich einige von mir verwendet. Um es kurz zu erklären, habe ich den dunkelroten Balken der "Zeitlinie" zentriert und ihm eine Breite von 2% gegeben, dann die anderen entsprechend positioniert, mit einer Breite von 49% - 1% - 20px, wobei 20px der Abstand zum Balken ist.

Die rechte Seite hat einen Rand links von 2% (die Breite des Balkens) + doppelten Abstand zum Balken (wir wollen den linken Rand nicht ignorieren) So sehen die Berechnungen aus die rechte Seite:

.level .right { 
     width: calc(49% - 1% - 20px); 
     margin-left: calc(2% + 40px); 
     vertical-align:middle; 

der vollständige codepen here betrachtet werden können. Ich hoffe, es hilft!

+0

es ist sehr sehr sehr nahe, das Problem ist nur eine zentrale Zeitleiste mit einem festen wittd, das war das schwierige Bit. Etwas, was ich versucht habe, hier zu erreichen: http://codepen.io/anon/pen/wWZwGL –

+0

Das 2% kann im CodePen auf einen beliebigen Wert geändert werden. Sie müssen die 1% in der Seitenbreitenberechnung durch die Hälfte der Zeitleistenbreite ersetzen, und die 2% in der Randberechnung der rechten. Hier finden Sie ein Beispiel für eine 100px-Timeline-Leiste: http://codepen.io/pghiran/pen/ZOyzBL Ist das, was Sie meinten? –

+0

Das ist es, erstaunlich, genau das, was ich erreichen wollte, vielen Dank, und der Code ist einfach, wenn Sie durchschauen, wirklich cool. So elegant :) –