CSS div布局 嵌套
https://www.xiaobuteach.com/html/div-layout/nest.html?from=bili
CSS div布局 嵌套
div布局包括行布局與列布局的不斷嵌套。
以下列頁(yè)面結(jié)構(gòu)為例，實(shí)現(xiàn)如下頁(yè)面的整體結(jié)構(gòu)。
實(shí)現(xiàn)效果如下：
本例基本步驟
第1步：整體劃分為兩列；
第2步：第1列劃分3行；
第3步：第2列繼續(xù)劃分為2列；
第4步：第2-2列劃分為3行；
聲明
聲明1：我們只實(shí)現(xiàn)結(jié)構(gòu)，并不實(shí)現(xiàn)細(xì)節(jié)。
聲明2：為方便大家初學(xué)，樣式我們不考慮公用，只公用了clearfix清除浮動(dòng)，其余直接寫style屬性。
聲明3：div的id并未進(jìn)一步使用，僅為我們表達(dá)需要。
聲明4：為div加了邊框、寬高、邊距，為方便大家看出效果，并不是實(shí)際需要。
重點(diǎn)關(guān)注：div實(shí)現(xiàn)行與列的劃分；clearfix、float:left的使用。
第1步：整體劃分為兩列
<head>
? ?<meta charset="UTF-8">
? ?<title>CSS div布局 嵌套v1 | 小步教程</title>
? ?<style>
? ? ? ?.clearfix::after{
? ? ? ? ? ?content: '';
? ? ? ? ? ?display: block;
? ? ? ? ? ?clear: both;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<!-- 第1行 -->
? ?<div id="div_xiaobuteach" class="clearfix" style="border: 1px solid #2C7C93;">
? ? ? ?<!-- 第1列 -->
? ? ? ?<div id="div1" style="float:left; ? border: 1px solid #f00;margin: 10px;width: 100px;height: 400px;">
? ? ? ? ? ?第1列
? ? ? ?</div>
? ? ? ?<!-- 第1列結(jié)束 -->
? ? ? ?<!-- 第2列 -->
? ? ? ?<div id="div2" class="clearfix" style="float:left; ? border: 1px solid #0f0;margin: 10px;width: 400px;height: 400px;">
? ? ? ? ? ?第2列
? ? ? ?</div>
? ? ? ?<!-- 第2列 結(jié)束 -->
? ?</div>
? ?后續(xù)內(nèi)容
</body>
<div id="div_xiaobuteach">被分成多列，外層需要加clearfix，內(nèi)層需要加float:left。
第2步：第1列劃分3行
代碼
<!-- 第1列 -->
<div id="div1" style="float:left; ? border: 1px solid #f00;margin: 10px;width: 100px;height: 400px;">
? ?<div id="div1_1" style="border: 1px solid #00f;margin: 10px;">第1-1行</div>
? ?<div id="div1_2" style="border: 1px solid #00f;margin: 10px;">第1-2行</div>
? ?<div id="div1_3" style="border: 1px solid #00f;margin: 10px;">第1-3行</div>
</div>
<!-- 第1列結(jié)束 -->
<div id="div1">被分成3行，直接加3個(gè)div即可。（分成多列才要clearfix+float）
第3步：第2列繼續(xù)劃分為2列
<!-- 第2列 -->
<div id="div2" class="clearfix" style="float:left; ? border: 1px solid #0f0;margin: 10px;width: 400px;height: 400px;">
? ?<div id="div2_1" style="float:left; ? width: 250px;height: 350px;border: 1px solid #00f;margin: 10px;">
? ? ? ?第2-1列
? ?</div>
? ?<div id="div2_2" style="float:left; ? width:100px;height: 350px;border: 1px solid #00f;margin: 10px;">
? ? ? ?第2-2列
? ?</div>
</div>
<!-- 第2列 結(jié)束 -->
<div id="div2">被分成2列，所以它需要加clearfix，里層的div需要加float:left。
所以div2既有clearfix，又有float:left。
第4步：第2-2列劃分為3行
<div id="div2_2" style="float:left; ? width:100px;height: 350px;border: 1px solid #00f;margin: 10px;">
? ?<div id="div2_2_1" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-1行</div>
? ?<div id="div2_2_2" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-2行</div>
? ?<div id="div2_2_3" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-3行</div>
</div>
div2_2里分3行，分行直接加div既可。
完整代碼
<!DOCTYPE html>
<html>
<head>
? ?<meta charset="UTF-8">
? ?<title>CSS div布局 嵌套v4 | 小步教程</title>
? ?<style>
? ? ? ?.clearfix::after{
? ? ? ? ? ?content: '';
? ? ? ? ? ?display: block;
? ? ? ? ? ?clear: both;
? ? ? ?}
? ?</style>
</head>
<body>
? ?<!-- 第1行 -->
? ?<div id="div_xiaobuteach" class="clearfix" style="border: 1px solid #2C7C93;">
? ? ? ?<!-- 第1列 -->
? ? ? ?<div id="div1" style="float:left; ? border: 1px solid #f00;margin: 10px;width: 100px;height: 400px;">
? ? ? ? ? ?<div id="div1_1" style="border: 1px solid #00f;margin: 10px;">第1-1行</div>
? ? ? ? ? ?<div id="div1_2" style="border: 1px solid #00f;margin: 10px;">第1-2行</div>
? ? ? ? ? ?<div id="div1_3" style="border: 1px solid #00f;margin: 10px;">第1-3行</div>
? ? ? ?</div>
? ? ? ?<!-- 第1列結(jié)束 -->
? ? ? ?<!-- 第2列 -->
? ? ? ?<div id="div2" class="clearfix" style="float:left; ? border: 1px solid #0f0;margin: 10px;width: 400px;height: 400px;">
? ? ? ? ? ?<div id="div2_1" style="float:left; ? width: 250px;height: 350px;border: 1px solid #00f;margin: 10px;">
? ? ? ? ? ? ? ?第2-1列
? ? ? ? ? ?</div>
? ? ? ? ? ?<div id="div2_2" style="float:left; ? width:100px;height: 350px;border: 1px solid #00f;margin: 10px;">
? ? ? ? ? ? ? ?<div id="div2_2_1" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-1行</div>
? ? ? ? ? ? ? ?<div id="div2_2_2" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-2行</div>
? ? ? ? ? ? ? ?<div id="div2_2_3" style="height: 60px;border: 1px solid #f00;margin:5px;">第2-2-3行</div>
? ? ? ? ? ?</div>
? ? ? ?</div>
? ? ? ?<!-- 第2列 結(jié)束 -->
? ?</div>
? ?后續(xù)內(nèi)容
</body>
</html>
