CSS Twee-kolom Webwerf-uitleg Skema

Kom ons maak 'n twee-kolom uitleg van die volgende voorkoms:

Laat ons eers die basiese bladsy struktuur skep:

<div id="wrapper">
	<div id="header">
		kop
	</div>
	<div id="container">
		<div id="content">
			inhoud
		</div>
		<div id="sidebar">
			kantbalk
		</div>
	</div>
	<div id="footer">
		voet
	</div>
</div>

Kom ons ken nou style aan die omhulsel toe, deur dit te sentreer op die skerm:

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

Laat ons nou style vir die kop- en voetgedeeltes bepaal:

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

Soos jy kan sien, gee ons die kop- en voetgedeelte 'n hoogte. Ons doen dit omdat in ons skema hulle geen inhoud het nie. As daar inhoud is moet jy nie die blokke se hoogte spesifiseer nie - dit sal deur hul inhoud bepaal word.

Let ook daarop dat ons nie 'n breedte aan hulle toeken nie. Die feit is dat die kop en voetgedeeltes blok elemente is en hul breedte sal outomaties gelyk wees aan die breedte van die omhulsel.

Kom ons gee hulle nou padding, sodat die teks nie aan die grense kleef nie:

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

Die teenwoordigheid van padding sal eger slegte impak hê op die groottes van die blokke - hulle sal groter word as wat gespesifiseer is. Kom ons verander die gedrag van alle blokke sodat padding en grense nie ons blokke laat uitbrei nie:

* {
	box-sizing: border-box;
}

Nou moet ons die inhoud en kantbalk in een ry plaas. Laat ons dit doen met behulp van flekse:

#container {
	display: flex;
}

Spesifiseer die inhoud en kantbalk se breedte. In hierdie geval moet die som van hul breedtes gelyk wees aan die breedte van die omhulsel:

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

Kom ons sê ons wil 'n spasie tussen die kantbalk en die inhoud maak. In hierdie geval moet die kantbalk margin kry. Tegelykertijd sal ons breedte van iemand moet aftrek vir hierdie margin. Kom ons neem dit van die inhoud af, deur sy breedte te verminder :

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

Kom ons voeg nou hoogte by, aangesien ons elemente geen inhoud bevat nie. Dit is voldoende om slegs hoogte by een element te voeg, want die tweede fleks element sal volgens hoogte aanpas (hoekom?). Kom ons spesifiseer die inhoud se hoogte:

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

Kom ons voeg die res van die style vir die inhoud en kantbalk by :

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

Daar, ons uitleg is klaar. Kom ons bring al die kode bymekaar:

<div id="wrapper">
	<div id="header">
		kop
	</div>
	<div id="container">
		<div id="sidebar">
			kantbalk
		</div>
		<div id="content">
			inhoud
		</div>
	</div>
	<div id="footer">
		voet
	</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;
}