โครงร่างเลย์เอาท์ที่มี Wrapper หลายตัวใน CSS

บ่อยครั้งในการพัฒนา เรามักพบเลย์เอาท์ ที่บล็อกต่างๆ มีพื้นหลังเต็มความกว้างของหน้า แต่เนื้อหาภายในบล็อกเหล่านั้นอยู่กึ่งกลาง นี่คือตัวอย่างของเลย์เอาท์ดังกล่าว:

ในเลย์เอาท์ดังกล่าว เราจะต้องสร้างไม่ใช่ แค่ wrapper เดียว แต่มีหลายตัว - สำหรับแต่ละบล็อก โดยภายใน wrapper จะต้องมีบล็อกอีกชั้นหนึ่ง ที่ทำหน้าที่จัดกลางเนื้อหา และต้องมีคลาสที่รับผิดชอบในการใส่สี พื้นหลังให้กับเนื้อหาด้วย

โครงร่างโดยรวมของเลย์เอาท์ของเราจะมีลักษณะ ดังต่อไปนี้:

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

คลาส center จะถูกใช้ สำหรับจัดกึ่งกลางบล็อก:

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

คลาส line จะถูกใช้สำหรับ การใส่สีบล็อก:

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

ส่วนคลาส wrapper จะเป็น parent ของแต่ละ บล็อก เราใช้มันเพื่อกำหนดระยะห่าง ระหว่างบล็อก:

.wrapper {
	margin-bottom: 30px;
}

ตอนนี้เรามาเขียนโค้ดเต็มของงานของเรา:

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