Rumah > Artikel > hujung hadapan web > CSS的经典三栏布局如何实现
这次给大家带来CSS的经典三栏布局如何实现,实现CSS的经典三栏布局的注意事项有哪些,下面就是实战案例,一起来看一下。
本文介绍了CSS经典三栏布局方案,分享给大家,也给自己做个笔记,具体如下:
三栏布局,顾名思义就是两边固定,中间自适应。三栏布局在开发十分常见
1. float布局
最简单的三栏布局就是利用float进行布局。首先来绘制左、右栏:
<style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } </style> <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div>
接下来再来看中间栏如何处理。我们知道对于float元素,其会脱离文档流,其他盒子也会无视这个元素。(但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。)所以此时只需在container容器内添加一个正常的div,其会无视left和right,撑满整个container,只需再加上margin为left right流出空间即可:
<style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } .main { background-color: green; height: 200px; margin-left: 120px; margin-right: 120px; } .container { border: 1px solid black; } <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div>
优势:简单
劣势:中间部分最后加载,内容较多时影响体验
2. BFC 规则
BFC(块格式化上下文)规则规定:BFC不会和浮动元素重叠。所以如果将main元素设定为BFC元素即可:
<style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; height: 200px; background-color: yellow; } .main { background-color: green; height: 200px; overflow: hidden; } <div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div> </div>
3. 圣杯布局
圣杯布局的核心是左、中、右三栏都通过float进行浮动,然后通过负值margin进行调整。
第一步,先来看下基本布局
<style> .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: left; width: 100px; height: 200px; background-color: yellow; } .main { float: left; width: 100%; height: 200px; background-color: blue; } </style> <body> <div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div> </div> </body>
此时看到的效果是:左、右两栏被挤到第二行。这是因为main的宽度为100%。接下来我们通过调整左、右两栏的margin来将左、中、右放在一行中:
.left { float: left; width: 100px; height: 200px; margin-left: -100%; background-color: red; } .right { float: left; width: 100px; height: 200px; margin-left: -100px; background-color: yellow; }
第二步,将left的margin-left设置为-100%,此时左栏会移动到第一行的首部。然后再将right的margin-left设置为其宽度的负值:-100px,则右栏也会移动到和左、中栏一行中:
不过此时还没有大功告成,我们试着在main中加入一些文字:
<body> <div class="container"> <div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div> <div class="left"></div> <div class="right"></div> </div> </body>
可以看到文字被压住了,接下来就要解决这个问题。
第三步,给container一个padding,该padding应该正好等于左、右栏的宽度:
.container { padding-left: 100px; padding-right: 100px; }
此时看到的结果是左、中、右三栏都整体收缩了,但文字依然被压住了。
第四步,给左、右两栏加上相对布局,然后再通过设置left和right值向外移动:
.left { float: left; width: 100px; height: 200px; margin-left: -100%; position: relative; left: -100px; background-color: red; } .right { float: left; width: 100px; height: 200px; margin-left: -100px; position: relative; right: -100px; background-color: yellow; }
到此为止,大功告成:
相信看了这些案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
相关阅读:
H5的FileReader分布读取文件应该如何使用以及其方法简介
Atas ialah kandungan terperinci CSS的经典三栏布局如何实现. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!