Skema Layout Dua Lajur Laman Web dalam CSS

Mari buat layout dua lajur seperti berikut:

Pertama, mari buat struktur asas halaman:

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

Sekarang, mari berikan gaya kepada wrapper, dengan melaraskannya ke tengah skrin:

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

Sekarang, mari tetapkan gaya untuk header dan footer:

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

Seperti yang anda lihat, kami memberikan ketinggian kepada header dan footer. Kami melakukan ini kerana dalam skema kami, mereka tidak mempunyai kandungan. Jika terdapat kandungan, ketinggian tidak sepatutnya ditetapkan untuk blok - ia akan dibentuk oleh kandungan mereka.

Perhatikan juga bahawa kami tidak memberikan lebar kepada mereka. Hal ini kerana header dan footer adalah elemen blok dan lebar mereka secara automatik akan sama dengan lebar wrapper.

Sekarang mari berikan mereka padding, supaya teks tidak melekat pada sempadan:

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

Walau bagaimanapun, kehadiran padding akan memberi kesan buruk kepada saiz blok - mereka akan menjadi lebih besar daripada yang dinyatakan. Mari ubah tingkah laku semua blok supaya padding dan sempadan tidak mengembangkan blok kami:

* {
	box-sizing: border-box;
}

Sekarang kita perlu meletakkan kandungan dan sidebar dalam satu baris. Mari lakukan ini menggunakan flex:

#container {
	display: flex;
}

Tetapkan lebar untuk kandungan dan sidebar. Jumlah lebar mereka harus sama dengan lebar wrapper:

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

Katakan kita ingin membuat jarak antara sidebar dan kandungan. Dalam kes ini, kita perlu memberikan margin kepada sidebar. Pada masa yang sama, kita perlu mengambil lebar daripada seseorang untuk margin ini. Mari ambil daripada kandungan, dengan mengurangkan lebarnya:

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

Sekarang mari tambahkan ketinggian, kerana elemen kami tidak mengandungi kandungan. Memadai untuk menambah ketinggian hanya kepada satu elemen, kerana elemen flex kedua akan menyesuaikan ketinggian (mengapa?). Mari tetapkan ketinggian untuk kandungan:

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

Mari tambahkan gaya yang lain untuk kandungan dan sidebar:

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

Semua, layout kami sudah siap. Mari kumpulkan semua kod bersama:

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