📝个人主页:爱吃炫迈
💌系列专栏:HTML+CSS
🧑💻座右铭:道阻且长,行则将至💗
文章目录
圣杯布局HTML代码步骤CSS代码 双飞翼布局HTML代码步骤CSS代码 小结圣杯布局
HTML代码
<div class="wrap"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div>
步骤
给最外层容器wrap设置padding-left: 200px;
、padding-right: 200px;
渲染content
、left
、right
三个容器 都设置浮动float: left;
,脱离文档流;设置left和right宽度和高度:width: 200px;
、height: 100px;
设置center的宽度:width: 100%;
,使其充满容器;高度:height: 100px;
🌸查看效果
将left移动到左边空白区 先将left拉回第一行,使其覆盖在center的最左侧:position: relative;
、margin-right: -100%;
将left相对于center容器向左移100%(也就是content
自身的宽度)left: -200px;
将right移动到右边空白区 先将right拉回第一行:position: relative;
、margin-left: -200px;
将right相对于自身向右移200px:left: 200px;
🌸最终效果
CSS代码
.wrap {padding-left: 200px;padding-right: 200px;}.left {position: relative;float: left;left: -200px;margin-right: -100%;width: 200px;height: 200px;background-color: pink;}.center {float: left;width: 100%;height: 200px;background-color: greenyellow;}.right {position: relative;float: left;left: 200px;margin-left: -200px;width: 200px;height: 200px;background-color: pink;}
双飞翼布局
HTML代码
<div class="wrap"><div class="center">center</div><div class="left">left</div><div class="right">right</div></div>
步骤
渲染content
、left
、right
三个容器 都设置浮动float: left;
,脱离文档流;设置left和right宽度和高度:width: 200px;
、height: 200px;
设置center的宽度:width: 100%;
,使其充满容器;高度:height: 200px;
🌸查看效果
将left拉回第一行,使其覆盖在center的最左侧:margin-right: -100%;
将right拉回第一行,使其覆盖在center的最右侧:margin-left:-200px
🌸最终效果
CSS代码
.left {float: left;margin-left: -100%;width: 200px;height: 200px;background-color: pink;}.center {float: left;width: 100%;height: 200px;background-color: greenyellow;}.right {float: left;margin-left: -200px;width: 200px;height: 200px;background-color: pink;}
小结
圣杯布局和双飞翼布局实现的效果都是相同的,只是在左右容器覆盖在中间容器中时,处理的容器不同而已。圣杯布局在处理左右容器,用相对定位时要注意左右平移的方向是相反的。双飞翼布局处理中间容器时要注意内层容器的内边距。