Spalten in der breite aut. erweitern

MarcoCH

Angesehenes Mitglied
Hallo Zusammen

Evtl. suche ich mit den falschen Ansätzen.
Ich brauche eine Spalte die sich in der breite je nach Browsergrosse erweitert.

Beispiel:

CODE <style>

.columns3 {

-webkit-column-count: 3; /* Chrome, Safari, Opera */

-moz-column-count: 3; /* Firefox */

column-count: 3;

-webkit-column-gap: 50px; /* Chrome, Safari, Opera */

-moz-column-gap: 50px; /* Firefox */

column-gap: 50px;

-webkit-column-rule: 15px outset #00ffff; /* Chrome, Safari, Opera */

-moz-column-rule: 15px outset #00ffff; /* Firefox */

column-rule: 15px outset #00ffff;

}

</style>

</head>

<body>

<div class="columns3">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eu augue orci. Morbi tristique a felis et varius. Sed augue nunc, cursus sed congue sit amet, mollis sed risus. Aliquam sit amet fringilla nisl. Vivamus ullamcorper odio magna, ut sagittis justo accumsan at. Donec turpis turpis, sagittis vel nisl eget, sodales ullamcorper eros. Etiam ut velit non sapien tincidunt ultrices in et nisi. Phasellus fringilla quam rutrum, semper neque pretium, fermentum justo. Suspendisse convallis, purus vitae mollis semper, est justo pretium neque, sit amet convallis nisi justo vel justo. Integer vestibulum, felis vel ultricies ornare, diam risus viverra odio, at tempus elit tellus quis purus. Sed porta, eros vel vehicula sollicitudin, nisi orci maximus magna, vitae commodo dui magna nec libero.

</div>


Doch hier gebe ich die Spalten Menge an, ich möchte aber, dass die Spaltenmenge je nach Browserbreite selbst def. wird. Also je Breiter die Möglichkeit um so mehr Spalten, je weniger Breit der Browser desto weniger Spalten (min. 1 Spalte)

Wie finde ich da was, nach was muss ich suchen?

Danke für die Hilfe ...

Grüsse
Marco
 
Hallo Marco,

ich glaube da hast du mit column-count den falschen Ansatz.
Die Lösung für dein Problem lautet Flexbox, damit kannst du eine maximale und minimale Breite einer Spalte (bzw eines Containers) angeben und
diese je nach Viewport mit Hilfe von Mediaqueries anpassen.
So lassen sich dann auch automatisch die Anzahl der Spalten je nach Viewport bestimmen.

Das Thema ist ein bisschen zu umfangreich für eine Erklärung hier in der Antwort, daher würde ich dir einfach diesen Link empfehlen: http://webkrauts.de/artikel/2012/css3-flex...r-float-layouts


 
Zurück
Oben