圣杯布局原来这么简单！！

文章目录

什么是圣杯布局
圣杯布局的特点
怎么实现圣杯布局
完整代码展示
双飞翼布局

什么是圣杯布局

圣杯布局是一个两侧宽度固定，中间宽度自适应的三栏布局

圣杯布局的特点

中间部分在DOM结构上优先，以便先行渲染
允许三列中的任意一列成为最高列（三列高度不一样并且可以以任一列的高度为最高）

怎么实现圣杯布局

写下HTML代码

 <div class="container"><div class="main">中间</div><div class="left">左边</div><div class="right">右边</div></div>

使三栏都处于左浮状态，并且使中间栏的宽度成父容器的100%

   .container {min-width: 400px;height: 200px;}.main {width: 100%;height: 100px;float: left;background-color:red;}.left {width: 200px;height: 200px;background-color: skyblue;float: left;}.right {width: 150px;height: 150px;background-color: skyblue;float: left;}

为主容器设置左右padding的值，使其以后为侧边栏定位空出位置，padding的值为侧边栏的宽

.container {/*预留出位置  */padding-left: 200px;padding-right: 150px;}

4. 为两侧侧边栏加上负margin,用以调整位置。其中左边栏设为margin-left:-100%,而右边栏的margin-left则为负的其自身宽度（利用了浮动元素的负margin到一定值后会使其自身往上一行移动的原理）

   .left {margin-left: -100%;}.right {margin-left: -150px;}

5. 为左边栏和右边栏添加position:relative，然后对它们进行定位移动到两侧

 .left {position: relative;left: -200px;}.right {position: relative;right: -150px;}

完整代码展示

<style>body {margin: 0;padding: 0;} .container {min-width: 400px;height: 200px;/*预留出位置  */padding-left: 200px;padding-right: 150px;}.main {width: 100%;height: 100px;float: left;background-color:red;}.left {width: 200px;height: 200px;background-color: skyblue;float: left;margin-left: -100%;position: relative;left: -200px;}.right {width: 150px;height: 150px;background-color: skyblue;float: left;margin-left: -150px;position: relative;right: -150px;}
</style>
<body><div class="container"><div class="main">中间</div><div class="left">左边</div><div class="right">右边</div></div>
</body>

双飞翼布局

双飞翼布局参考我的另一篇博客
双飞翼布局

圣杯布局原来这么简单！！相关推荐

CSS简单实现圣杯布局和双飞翼布局
一.你能学到什么? ①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性 css变量设置(两个布局都有的部分) :root{/* 左边栏宽度 */--lw:300px ...
使用flex实现圣杯布局，就是这么简单
flex布局其实挺香的,但是现在国内好多pc网页还是传统的float+position布局,可能是考虑到兼容性或者以前的系统吧,用flex实现的圣杯布局特点如下,整体分上中下三部分,中间部分高度自适应 ...
三种方式实现圣杯布局
圣杯布局的三种实现圣杯布局是一种很常见的css布局.他要求: 上部和下部各自占领屏幕所有宽度. 上下部之间的部分是一个三栏布局. 三栏布局两侧宽度不变,中间部分自动填充整个区域. 中间部分的高度是三 ...
CSS 圣杯布局升级版---多个固定宽度一个自适应宽度
1.一个div固定,一个div自适应宽度.两种情况,固定在左或者在右. HTML: <div class="box1"><div class="main ...
八十九、常见的圣杯布局和双飞翼布局
@Author:Runsen 圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式. 圣杯布局圣杯布局是经典的css布局,左右两栏的宽度固定不变,中间那一栏是自适应. 使用弹性盒子布局实现圣杯 ...
经典的三栏布局：圣杯布局，双飞翼布局，flex布局
需求: 两边栏固定宽度,中间宽度自适应,一般左边栏为导航,右边栏为广告,中间栏为主要内容的展示,div块上中间栏放在第一位,重要的东西放在文档流前面可以优先渲染. 圣杯布局和双飞翼布局的共同特点都是利 ...
不懂圣杯布局？5种方式包教包会
前言本文针对圣杯布局(两边固定,中间自适应布局)以五种方式进行讲解,话不多说,现在开始方式一:float布局利用float实现圣杯布局是最原始也是兼容性最好的方式,当然相对于其它几种来说较为复杂 ...
大厂面试必考题：三行布局之圣杯布局和双飞翼布局的区别
前言今天给大家分享一个圣杯布局和双飞翼布局及他们之间的区别,这两个三行布局一直是一些大厂前端面试的高频考点,带你走进大厂面试题,活不多说,冲冲冲~ 布局效果这两个种三行布局效果是一样的,实现的效果 ...
当你试图将【圣杯布局】无限套娃__
刚学会圣杯布局突发奇想... 先是简单的嵌套限界だ同理可得{ 再用iframe再嵌套自我的克隆体_ 再在克隆体中用iframe嵌套自我的克隆体_ 再再在克隆体的克隆体中用iframe嵌套自我的克 ...