Uitleg van Boustels met Veelvuldige Omhulsels in CSS

Dit is gereeld dat tydens ontwikkeling boustels teëgekom word waar blokke 'n agtergrond oor die volle breedte van die bladsy het, maar die inhoud van hierdie blokke in die middel staan. Hier is 'n voorbeeld van so 'n boustel:

In so 'n boustel sal ons nie een omhulsel hoef te maak nie, maar verskeie - vir elke blok. Binne die omhulsel moet daar nog 'n blok wees wat die inhoud sentreer. Daar moet ook 'n klas wees wat verantwoordelik is om die inhoud met 'n agtergrondkleur in te kleur.

Die algemene skema van ons boustel sal so lyk:

<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>
<div class="wrapper">
	<div class="center">
		
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		
	</div>
</div>

Die klas center sal gebruik word om blokke te sentreer:

.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}

Die klas line sal gebruik word om blokke in te kleur:

.wrapper.line {
	background-color: #008040;
	color: white;
}

En die klas wrapper sal die ouer van elke blok wees. Ons gebruik dit om spasie tussen blokke te gee:

.wrapper {
	margin-bottom: 30px;
}

Laat ons nou die volledige kode van ons taak skryf:

<div class="wrapper">
	<div class="center">
		<h1>Hoofwerfkop</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Ons Maatskappy</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Ons Pryse</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Ons Kontakte</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>

* {
	box-sizing: border-box;
}
body {
	margin: 0;
}

.wrapper {
	margin-bottom: 30px;
}
.wrapper.line {
	background-color: #008040;
	color: white;
}
.center {
	width: 800px;
	padding: 20px;
	margin: 0 auto;
}
.wrapper h1 {
	margin: 0;
	font: 40px "Times New Roman";
}
.wrapper h2 {
	margin: 0;
	font: 25px "Times New Roman";
}
.wrapper p {
	font: 16px/1.4 Arial;
	text-align: justify;
}