logo

Bootstrap 4 alpha

Mega Menue Sidebar

css3area


CSS 3 Multiple Columns (Width)

Mit CSS3 ist es auch möglich Spalten zu "stylen/plazieren" die ohne aufwendige Layererstellung und deren Plazierung umgesetzt werden kann. Im Folgenden sehen Sie ein einfaches Beispiel welches sich nur Grundparametern bedient um ein mehrspaltiges (responsive) Layout anzuzeigen. Hierbei wird die Column (*12 8em) angegeben, der Spaltenabstand (gab) und die Textausrichtung (justify).

Morbi ligula nisi, sollicitudin in adipiscing et, semper vel metus. Nullam malesuada placerat erat at ullamcorper. Curabitur auctor nunc bibendum lorem pellentesque posuere. Donec in nulla mollis magna auctor tempus vel sed elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In vitae felis sem, vitae rhoncus velit. Sed et pharetra purus. Quisque ultrices augue ut dui rutrum tincidunt? Integer luctus massa pulvinar nulla egestas ac eleifend nisi facilisis. Pellentesque in orci nisi. Ut erat libero; sollicitudin eget elementum vitae, consectetur nec risus. Integer molestie lectus nec metus congue dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus euismod, sapien sed convallis lacinia, ante tellus venenatis leo, id feugiat velit ligula varius nulla. Aenean purus eros, ullamcorper facilisis vehicula nec, tristique sit amet odio. Duis et purus et magna pharetra bibendum ut vel magna?

 


#my_CSS3_id {
text-align:justify;
-moz-columns: 12 8em;
-webkit-columns: 12 8em;
columns: 12 8em;
-webkit-column-gap:1.5em;
}

 

CSS 3 Multiple Columns (Count)

Im Folgenden Beispiel werden 3 Spalten generiert über column-count (einer Erweiterung) wobei die Spalten noch mittels column-rule mit einem Border abgesetzt dargestellt werden.

Donec aliquam elit at quam convallis tempus. In neque ligula, porta eu varius vel, tincidunt id diam. Quisque a justo eros; non tempor diam. Etiam semper purus volutpat diam congue sed ornare risus blandit! Pellentesque luctus pulvinar nibh! Cras ullamcorper cursus ligula quis ultrices. Nulla molestie volutpat ante id dapibus. Cras tincidunt augue eu massa faucibus pellentesque. In hendrerit neque sed lectus adipiscing eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed quam leo, semper quis porttitor vel, porta malesuada nibh. Integer imperdiet porttitor risus eu ornare.

 


#my_CSS3_id {
text-align:justify;
text-align:justify;
-moz-column-count:3;
-moz-column-gap:1.5em;
-moz-column-rule:1px solid #c4c8cc;
-webkit-column-count:3;
-webkit-column-gap:1.5em;
-webkit-column-rule:1px solid #c4c8cc;
}

 

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.