css Frage zu dreispaltigem Layout

  • Hallo zusammen,

    ich erstelle gerne Themes mit dreispaltigem Layout. Ich lege dabei alle Spalten als div Container an und setze sie auf float: left; die rechte Spalte auch schon mal auf foat: right. Das hat zurfolge, dass die rechte Spalte grundsätzlch unter die mittlere rutscht sobald die Displaybreite nicht mehr ausreichend ist, also z.B. auf Smartphones. Bisher hatte ich das immer sozusagen als unvermeidbar hingenommen. Nicht schön aber immer noch besser als die Spalten allesamt bis zur Unleserlichkeit zu verkleinern.

    Vor kurzem bin ich dann aber über eine WP-Seite gestolpert, die das wesentlich eleganter löst. Und zwar rutscht die rechte Spalte nicht unter die mittlere, sondern unter die Linke. Beide Spalten bilden dann sozusagen eine einzige linke Spalte und aus dem dreispaltigen Layout wird so auf schmalen Displays ein zweispaltiges, etwas längeres Layout.

    Leider habe ich mir die Seite nicht gemerkt und auch nicht reingespickt, wie das umgesetzt wurde. Mist!

    Hat jemand eine Idee wie das gelöst worden sein könnte?

    • Anzeige

    Hallo!

    Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

    • ✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
    • ✔️ Deutsche Server & DSGVO-konform
    • ✔️ Persönlicher Support (kein 0815-Ticket-System)

    Mehr erfahren

  • Ich versteh zwar dein Beispiel nicht wirklich, aber einfach mal in grids einlesen.
    Dein Ansatz mit dem float:right kommt mir doch reichlich seltsam vor, normalerweise macht man es doch so,
    dass jede Spalte 33% hat, dann braucht man kein float:right.
    Ich kenne es eher so, dass bei smartphones jede Spalte auf 100% gestellt wird und somit die 3 Spalten untereinander stehen.
    Oder du machst ein fluid grid, das sich mitskaliert.

    "Gewinnspiele, Gutscheinaktionen, Werbung, insbesondere kommerzielle, ist sowohl in Signaturen als auch Beiträgen ohne vorherige Genehmigung des Betreibers verboten. Bei Zuwiderhandlung behalten wir uns vor die Beiträge zu löschen und den entsprechenden User zu sperren." Auszug aus den WPDE.org Nutzungsbedingungen

  • Da gibt es viele Möglichkeiten.

    Entweder alle Spalten auf float: left; => Da müsste dann die dritte Spalte wieder nach links kommen, es sei denn, die erste Spalte ist höher als die zweite …
    Oder die divs mit display: inline-block; wie Text fließen lassen.
    Oder mit display: table; arbeiten.

    Alles gegebenenfalls in Kombination mit den passenden Media Queries.
    Ist ja auch immer die Frage: Sind es drei Textblöcke oder eine durch drei teilbare Anzahl? Etc.

    Gruß
    helix

  • du kannst dreispaltig so umsetzen=> ich nutz für die einfachste Erklärung einfach "div" ok....

    drei div nebeneinander
    oder

    zwei div nebeneinander
    und eines dieser beiden divs wieder teilen...

    du kannst diese Container mittels float auf ihren Platz rücken,
    entweder alle drei mit float left // oder float right => geht einwandfrei

    oder
    bei der zweispaltigen Lösung, die dann schlussendlich dreispaltig aussieht:
    float left
    float right
    und in einem der beiden Container wieder so...

    oder du lernst gleich modernes CSS und liest dich in das System "flex-box" ein. http://www.flexboxdefense.com/
    das ist eine Site wo du flex box üben kannst

    damit kannst du die Anordnungen auf verschiedenen Devices nach Gusto gestalten.

    was am iPad unten ist, kann am Smartphone oben sein und am Desktop ganz links :-)


    schaust du dir zb das Theme hueman an => da wird mit negativen margins die hoch flexible Dreispaltigkeit erreicht.

    d.h. du hast eine unendliche Möglichkeit deine Boxen//divs anzuordnen.
    floats
    negative margins
    flex-box
    und alle sind sehr spannend und es ist eine Freud damit zu spielen, unabhängig, dass man beim Lernen vielleicht hie und da ein bisschen graue Haare bekommt,
    mein Trick als ich das lernte: ich gab jeder Spalte eine bunte Hintergrundfarbe => so sah ich sehr eindeutig was ich tat

    hier werden einige der Methoden vorgestellt

    http://www.sitepoint.com/easy-responsive-css-grid-layouts/


    viel Spaß beim Ausprobieren!

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!