Ankündigung

Einklappen
Keine Ankündigung bisher.

Seitendarstellung

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Seitendarstellung

    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]
    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>
    [LESS bzw. CSS-Code]
    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;    
          }  
        }
      }
    }
    screenshot.jpg

  • #2
    Simples CSS. 50% ist die Hälfte, 33,3% ein Drittel. Wenn eine Seite größer gleich 33,3% und kleiner gleich 50% ist, passen automatisch immer zwei Seiten nebeneinander.

    Du hast Recht, Flex wäre die schönere Lösung. Aber prinzipiell geht das mit Float genauso, auch wenn ich davon abraten würde.

    Kommentar


    • #3
      Ich definiere aber eine Seitenbreite.
      Sprich: Die Seiten als solche sind nicht responsive.

      Ich bekomme also nicht größere Seiten pro Zeile, sondern habe je nach Browserbreite auch mal 10 oder 20 Seiten in einer Zeile, bevor ich in die nächste Zeile umbreche.

      Oder verstehe ich dich falsch?

      Kommentar


      • #4
        Zitat von Klimbo Beitrag anzeigen
        Ich definiere aber eine Seitenbreite.
        Sprich: Die Seiten als solche sind nicht responsive.

        Ich bekomme also nicht größere Seiten pro Zeile, sondern habe je nach Browserbreite auch mal 10 oder 20 Seiten in einer Zeile, bevor ich in die nächste Zeile umbreche.

        Oder verstehe ich dich falsch?
        Ach so ist das gmeint, na dann gruppiere halt einfach immer zwei Seiten in einem <div>-Element.

        Kommentar


        • #5
          Hehe, das hätte ich dazu sagen sollen.
          Man wird die Seiten am Ende untereinander verschieben können. Zum sortieren.

          Das geht mit der zusätzlichen Ebene "Double-Pages" dann nicht mehr, weil ich dann nur "Double-Pages" verschieben könnte, oder die "Pages" innerhalb einer "Double-Page".
          Aber von eine Page von einer Double-Page in die nächste Double-Page zu schieben wäre nicht möglich. Zumindest nicht mit jQuery Sortable in reiner Form.

          Kommentar

          Lädt...
          X