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:
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.
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,
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?
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
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. –
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. –