圣杯布局

网友投稿 637 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小时内删除侵权内容。

上一篇:《计算机组成与体系结构(原书第4版)》 —1.4 标准组织
下一篇:基于selenium的爬虫(chromedriver)-java环境下
相关文章