圣杯布局

网友投稿 606 2022-05-30

圣杯布局针对的是左右栏固定，中间栏自适应的网页布局。

它的布局有以下几点：

1、三列布局，中间宽度自适应，左右定宽

2、中间栏要在浏览器中优先展示渲染

3、允许任意列的高度最高

初始代码：

                     中间

    左边

    右边

图1. 样式

图二，设置浮动使三个样式在一行

在left,right,middle 添加float:left 浮动,这时候会发现middle宽度缩小.

图三，改变中间宽度

添加middle为 width: 100%，中间部分middle设置100%会撑满，这样因为浮动的关系，middle会占据整个container，左右两块区域被挤下去.

图三，移动左边到第一行左侧

在left样式增加margin-left：-100%为负值，让left回到第一行左侧位置

图四：移动右边到第一行右侧

在right样式增加margin-left: -200px, 200px是右边的自身高

图五：改变父元素的内边距

在.container增加padding: 0 200px;

图六：此时发现左右元素遮挡了中间元素的内容，我们通过相对定位position定位属性来解决

在left和right样式里面添加postition: relative, 被设置为relative相对定位后，其元素不会脱离标准流，不会影响其他元素的排布。

在left样式增加 left:-200px; , right样式增加 left:200px; 向左增加负200px元素，把左边顶到第一行前端，right想左增加200px元素正好把右边顶到第一末端.

代码如下：

总结圣杯布局和飞翼布局区别：

圣杯布局和飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

圣杯布局和飞翼布局解决问题的方案在前一半是相同的，也就是三栏全部float浮动，但左右两栏加上负margin让其跟中间栏div并排，以形成三栏布局。

不同在于解决”中间栏div内容不被遮挡“问题的思路不一样：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position:relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

容器

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。