重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
这篇文章给大家介绍CSS的三列式怎么用,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
创新互联建站网站建设公司一直秉承“诚信做人,踏实做事”的原则,不欺瞒客户,是我们最起码的底线! 以服务为基础,以质量求生存,以技术求发展,成交一个客户多一个朋友!专注中小微企业官网定制,成都网站制作、网站建设,塑造企业网络形象打造互联网企业效应。
DOM结构如下:
XML/HTML Code复制内容到剪贴板
流程解说
接下来,让我们一步一步地实现圣杯布局;
1、 首先分别浮动main、sub、extra三列, 然后利用负外边距把sub列和extra列定位到左右两边。这时的CSS代码如下:
CSS Code复制内容到剪贴板
.main { float: left; width: 100%; height: 300px; background-color: rgba(255, 0, 0, .5); } .sub { float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); }
2、 完成上步后,sub和extra列已经到了正确的位置,但是sub和extra列却覆盖了main的两边,对于这个问题,圣杯布局的解决办法是给容器container添加左、右内边距,从而让main列定位到正确的位置。
CSS Code复制内容到剪贴板
.container { padding-left: 210px; padding-right: 190px; }
3、 完成第二步后又出现了新问题:sub、extra列也受到容器左右内边距的影响位置发生了移动。为了解决这个问题,圣杯布局使用相对定位使sub、extra列回到正确的位置。新添加代码如下:
CSS Code复制内容到剪贴板
.sub { position: relative; left: -210px; } .extra { position: relative; rightright: -190px; }
4、 当浏览器缩小到一定程度时,这个布局可能会被破坏,可以在body上添加min-width属性解决。最终的圣杯布局CSS代码如下:
CSS Code复制内容到剪贴板
body { min-width: 600px; /* 2*sub + extra */ } .container { padding-left: 210px; padding-right: 190px; } .main { float: left; width: 100%; height: 300px; background-color: rgba(255, 0, 0, .5); } .sub { position: relative; left: -210px; float: left; width: 200px; height: 300px; margin-left: -100%; background-color: rgba(0, 255, 0, .5); } .extra { position: relative; rightright: -190px; float: left; width: 180px; height: 300px; margin-left: -180px; background-color: rgba(0, 0, 255, .5); }
点击查看在线demo
完整实例
效果如下:
CSS 和 DOM 代码如下:
CSS Code复制内容到剪贴板
圣杯布局 头部主内容栏自适应宽度
侧边栏固定宽度
主内容栏自适应宽度
侧边栏固定宽度
主内容栏自适应宽度
侧边栏1固定宽度
侧边栏2固定宽度
主内容栏自适应宽度
侧边栏1固定宽度
侧边栏2固定宽度
主内容栏自适应宽度
侧边栏1固定宽度
侧边栏2固定宽度
底部
圣杯布局的优点总结如下:
1.使主要内容列先加载。
2.允许任何列是最高的。
3.没有额外的div。
4.需要的hack很少。
关于CSS的三列式怎么用就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。