แบบแผนเลย์เอาต์สองคอลัมน์ของเว็บไซต์ใน CSS

มาสร้างเลย์เอาต์สองคอลัมน์รูปแบบต่อไปนี้กัน:

เริ่มต้นด้วยการสร้างโครงสร้างหลักของหน้า:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="content">
			content
		</div>
		<div id="sidebar">
			sidebar
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

ตอนนี้ตั้งสไตล์ให้กับ wrapper โดยจัดให้อยู่กึ่งกลางหน้าจอ:

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}

ต่อไปมากำหนดสไตล์ให้กับ header และ footer:

#header {
	height: 200px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	border: 1px solid black;
}

อย่างที่คุณเห็น เราได้กำหนดความสูงให้กับ header และ footer เราทำอย่างนี้เพราะในแบบแผนของเราพวกเขาไม่มีเนื้อหา หากมีเนื้อหาอยู่ ไม่ควรกำหนดความสูงให้กับบล็อก - มันจะถูกกำหนดขึ้นโดยเนื้อหาของพวกเขา

ยังไงก็ตาม โปรดทราบว่าเราไม่ได้กำหนดความกว้างให้กับพวกเขา สาเหตุคือ header และ footer เป็นองค์ประกอบระดับบล็อก และความกว้างของพวกเขาจะเท่ากับความกว้างของ wrapper โดยอัตโนมัติ

ตอนนี้มากำหนด padding ให้กับพวกเขา เพื่อให้ข้อความไม่ติดขอบ:

#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}

อย่างไรก็ตาม การมี padding จะส่งผลเสียต่อขนาดของบล็อก - พวกเขาจะกลายเป็นใหญ่กว่าที่ระบุไว้ มาปรับพฤติกรรมของบล็อกทั้งหมด เพื่อให้ padding และเส้นขอบไม่ทำให้บล็อกของเราขยายออก:

* {
	box-sizing: border-box;
}

ตอนนี้เราต้องวางเนื้อหาและแถบด้านข้างไว้ในแถวเดียวกัน ทำได้โดยใช้ flex:

#container {
	display: flex;
}

มากำหนดความกว้างให้กับเนื้อหาและแถบด้านข้าง ในขณะที่ผลรวมความกว้างของพวกเขาควรเท่ากับความกว้างของ wrapper:

#content {
	width: 800px;
}
#sidebar {
	width: 200px;
}

สมมติว่าเราต้องการสร้างระยะห่างระหว่างแถบด้านข้างและเนื้อหา ในกรณีนี้จำเป็นต้องกำหนด margin ให้กับแถบด้านข้าง ในขณะเดียวกันเราจะต้องหักความกว้างสำหรับ margin นี้จากบางคน มาหักจากเนื้อหา โดยลดความกว้างของมันลง:

#content {
	width: 780px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

ตอนนี้มาเพิ่มความสูง เนื่องจากองค์ประกอบของเราไม่มีเนื้อหา เพียงเพิ่มความสูงให้กับองค์ประกอบเดียวก็พอ เพราะองค์ประกอบ flex ที่สองจะปรับตามความสูง (ทำไม?) มากำหนดความสูงให้กับเนื้อหา:

#content {
	width: 780px;
	height: 700px;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
}

มาเพิ่มสไตล์ที่เหลือให้กับเนื้อหาและแถบด้านข้าง:

#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}

ทั้งหมดนี้ เลย์เอาต์ของเราพร้อมแล้ว มาชมรวบรวมโค้ดทั้งหมดเข้าด้วยกัน:

<div id="wrapper">
	<div id="header">
		header
	</div>
	<div id="container">
		<div id="sidebar">
			sidebar
		</div>
		<div id="content">
			content
		</div>
	</div>
	<div id="footer">
		footer
	</div>
</div>

* {
	box-sizing: border-box;
}

#wrapper {
	width: 1000px;
	margin: 30px auto;
	border: 1px solid black;
}
#header {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}
#container {
	display: flex;
}
#content {
	width: 780px;
	height: 700px;
	padding: 20px;
	border: 1px solid black;
}
#sidebar {
	width: 200px;
	margin-right: 20px;
	padding: 20px;
	border: 1px solid black;
}
#footer {
	height: 200px;
	padding: 20px;
	border: 1px solid black;
}