Skema Tata Letak dengan Beberapa Pembungkus dalam CSS

Sering kali semasa pembangunan, kita menemui tata letak di mana blok mempunyai latar belakang sepanjang lebar halaman, manakala kandungan blok tersebut berada di tengah. Berikut adalah contoh tata letak sedemikian:

Dalam tata letak seperti ini, kita perlu membuat bukan satu pembungkus, tetapi beberapa - untuk setiap blok. Pada masa yang sama, di dalam pembungkus harus ada satu blok lagi yang melaksanakan penempatan kandungan di tengah. Juga harus ada kelas yang bertanggungjawab untuk mewarnakan kandungan dengan latar belakang.

Skema umum tata letak kami akan kelihatan seperti berikut:

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

Kelas center akan digunakan untuk meletakkan blok di tengah:

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

Kelas line akan digunakan untuk mewarnakan blok:

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

Dan kelas wrapper akan menjadi induk bagi setiap blok. Kami menggunakannya untuk memberikan jarak antara blok:

.wrapper {
	margin-bottom: 30px;
}

Sekarang mari kita tulis kod penuh untuk tugas kami:

<div class="wrapper">
	<div class="center">
		<h1>Main site header</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our company</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>Our price</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>Our contacts</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;
}