Mpango wa Miundo yenye Wrapper Nyingi katika CSS

Mara nyingi wakati wa ukuzaji, hukutana na miundo ambapo vitalu vina rangi ya asili upana wote wa ukurasa, na yaliyomo katika vitalu hivyo yako katikati. Hapa kuna mfano wa muundo kama huo:

Katika muundo kama huo, itatubidi tutengeneze si wrapper moja tu, bali nyingi - kwa kila kitu. Wakati huo huo, ndani ya wrapper lazima kuwe na kitu kingine, kinachofanya kuweka yaliyomo katikati. Pia lazima kuwe na darasa, linalowajibika kwa rangi ya yaliyomo kwa rangi ya asili.

Mpango wa jumla wa muundo wetu utaonekana kama ifuatavyo:

<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>

Darasa center litatumika kwa kuweka vitalu katikati:

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

Darasa line litatumika kwa kupaka rangi vitalu:

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

Na darasa wrapper litakuwa mzazi wa kila kitu. Tutatumia kwa kuweka pengo kati ya vitalu:

.wrapper {
	margin-bottom: 30px;
}

Sasa tuandike msimbo kamili wa kazi yetu:

<div class="wrapper">
	<div class="center">
		<h1>Kichwa kikuu cha tovuti</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Kampuni yetu</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Bei yetu</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Mawasiliano yetu</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;
}