3 Col Content

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: April 24 2022 15:03:52.