css Frage zu dreispaltigem Layout

HolgerGr · 16. März 2016

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?

am3 · 16. März 2016

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.

helix · 16. März 2016

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

Monika · 16. März 2016

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!

HolgerGr · 17. März 2016

Herzlichen Dank für die vielen Antworten. Ich werde mich mal in flex einlesen.

WPDE.org

css Frage zu dreispaltigem Layout

HolgerGr Well-Known Member

am3 Well-Known Member

helix Well-Known Member

Monika Well-Known Member
Ehrenmitglied

HolgerGr Well-Known Member

Nützliche Suchen

css Frage zu dreispaltigem Layout

HolgerGr Well-Known Member

am3 Well-Known Member

helix Well-Known Member

Monika Well-Known Member Ehrenmitglied

HolgerGr Well-Known Member

Monika Well-Known Member
Ehrenmitglied