3 Col Content

Content in 3 Spalten ausgeben

3 Col Content

Diese Art der Contentgestaltung ist für Produkt- oder Servicebeschreibungen recht beliebt. Meist wird diese Methode mit Bootstrap umgesetzt, was leider zu einem unglaublich verschachteltem und unnötig langem Code führt.

HTML Code

Dieser ist recht simpel da nicht mehr als ein container und eine weitere Klasse benötigt werden. Um das Beispiel etwas einfacher zu halten verfügt es über die Klasse "container" welche die Spalten enthält und die Klasse "col" welche den Inhalt beinhaltet.

CSS Code

Der Stylesheet ist so aufgebaut das der tatsächliche Contentbereich auf 80% limitiert wird, durch den padding-Wert wird erreicht das sich der Background jedoch auf voll 100% erstreckt. Damit die 3 Spalten sich richtig anordnen ist die Klasse col sowohl mit einem margin-Wert als auch mit einer definitierten width (32%) versehen.

Demo

Demo

Last modified: June 16 2019 16:10:39.

Diese Website verwendet Cookies. Datenschutzrichtlinien