CSS බහු wrapper දිලක්ෂන යෝජනා ක්‍රමය

සංවර්ධනයේදී, බහුලව හමුවන්නේ පිටුවේ පළල පුරා පසුබිමක් ඇති බ්ලොක්, එහි අන්තර්ගතය මධ්‍යයට සකස් කර ඇති දිලක්ෂන යෝජනා ක්‍රම වේ. එවැනි දිලක්ෂන යෝජනා ක්‍රමයක් සඳහා උදාහරණයක් මෙන්න:

එවැනි දිලක්ෂන යෝජනා ක්‍රමයක, අපට එක් 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 පන්තිය එක් එක් බ්ලොක් එකේ මව් පිටුව වනු ඇත. බ්ලොක් අතර ඉඩ ප්‍රමාණය නියම කිරීම සඳහා අපි එය භාවිතා කරමු:

.wrapper {
	margin-bottom: 30px;
}

දැන් අපගේ කාර්යයේ සම්පූර්ණ කේතය ලියමු:

<div class="wrapper">
	<div class="center">
		<h1>ප්‍රධාන වෙබ් අඩවි ශීර්ෂකය</h1>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>අපගේ සමාගම</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper">
	<div class="center">
		<h2>අපගේ මිල</h2>
		<p>
			...
		</p>
		<p>
			...
		</p>
	</div>
</div>
<div class="wrapper line">
	<div class="center">
		<h2>අපගේ සම්බන්ධතා</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;
}