Hello,
ich bin aktuell ein Tool am Programmieren, welches die Seiten eines Buches/einer Zeitung darstellen soll.
Hierzu ist es notwendig – logischerweise – immer Doppelseiten darzustellen.
Es darf also nicht nach einer Einzelseite umbrochen werden, sondern immer nach einer Doppelseite.
Bisher habe ich die Seiten innerhalb meiner Struktur immer mit "float: left" laufen lassen.
Per JavaScript habe ich dann berechnet, wie viele Doppelseiten in eine Zeile passen und habe diese dann mit "clear: left" an den entsprechenden Stellen umbrechen lassen.
Ich halte diese Methode für nicht sehr schön – Float kann man ja inzwischen theoretisch sehr gut mit Flex auflösen.
Außerdem ist die dauerhafte Berechnung über Javascript auch nicht besonders elegant
Aktuell fällt mir per Flex (oder Grid) keine Möglichkeit ein dieses Problem aufzulösen.
Hat jemand einen Ansatz? Der besser ist als mit Float, Clear und JavaScript zu arbeiten?
Ist eine reine CSS-Lösung möglich?
P.S.: Habe den alten Code weg gelassen – Der funktioniert und soll nicht die Grundlage sein.
[HTML-Code]
[LESS bzw. CSS-Code]
screenshot.jpg
ich bin aktuell ein Tool am Programmieren, welches die Seiten eines Buches/einer Zeitung darstellen soll.
Hierzu ist es notwendig – logischerweise – immer Doppelseiten darzustellen.
Es darf also nicht nach einer Einzelseite umbrochen werden, sondern immer nach einer Doppelseite.
Bisher habe ich die Seiten innerhalb meiner Struktur immer mit "float: left" laufen lassen.
Per JavaScript habe ich dann berechnet, wie viele Doppelseiten in eine Zeile passen und habe diese dann mit "clear: left" an den entsprechenden Stellen umbrechen lassen.
Ich halte diese Methode für nicht sehr schön – Float kann man ja inzwischen theoretisch sehr gut mit Flex auflösen.
Außerdem ist die dauerhafte Berechnung über Javascript auch nicht besonders elegant
Aktuell fällt mir per Flex (oder Grid) keine Möglichkeit ein dieses Problem aufzulösen.
Hat jemand einen Ansatz? Der besser ist als mit Float, Clear und JavaScript zu arbeiten?
Ist eine reine CSS-Lösung möglich?
P.S.: Habe den alten Code weg gelassen – Der funktioniert und soll nicht die Grundlage sein.
[HTML-Code]
HTML-Code:
<div id="project-pages"> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> <div class="page"></div> </div>
Code:
#project-pages { display: flex; flex-wrap: wrap; justify-content: stretch; width: 100%; .page { background: #fff; width: 120px; height: 100px; border: 1px solid #000; margin-bottom: 40px; &:nth-child(even) { margin-right: 10px; } } } }
Kommentar