左右两侧宽度固定,中间自适应之【圣杯+双飞翼】实现

loostudy 发布于2019-08-29 12:51 / 2212人阅读

摘要：圣杯左右两侧宽度固定中间自适应一般我们在写这种三列布局时希望中间主体部分优先渲染因此在中把部分提到和前面。布局定宽设置固定像素自适应设置宽度为固定和位置以上代码因为的宽度是撑满了整个页面后面浮动的掉到了下面可以设置把和位置重排。

左右两侧宽度固定,中间自适应这种布局相信很多feers都遇到过,可是有可能你没有系统的研究过有哪几种解决方案,本文章立志以浅显的语言来讲解其中一种圣杯解决方案。

圣杯 左右两侧宽度固定,中间自适应preview

一般我们在写这种三列布局时希望中间主体部分优先渲染,因此在html中把main部分提到left和right前面。

实现

以下代码实现由浅入深,一点一点实现,希望初学前端的同学或者比较薄弱的同学可以比较容易看懂,如果是对这种布局已经比较熟悉的同学直接看最后的实现代码吧。

float:left布局,定宽设置固定像素,自适应设置宽度为100%




  
  JS Bin
  


    
        main
        left
        right

margin-left固定left和right位置

以上代码因为main的宽度是100%撑满了整个页面,后面浮动的掉到了下面,可以设置-margin-left把left和right位置重排。设置left的margin-left: -100%,left顶到了container左上,那么right移动到left原来的位置,再将right的margin-left设置为-本身宽度,left和right的位置就定位好了




  
  JS Bin
  


    
        main
        left
        right

relative+padding解决main居中显示

以上代码实现有个问题就是main扔充满整个container被left遮挡,通过设置container的左右padding为left和right留空间,再用relative属性偏到正确的位置上




  
  JS Bin
  


    
        main
        left
        right

双飞翼布局

双飞翼布局和圣杯布局其实很想,只是在解决container 100%遮挡问题上解决不同,双飞翼使用的是内嵌div设置margin来缩小main内容区宽度

以上圣杯和双飞翼布局有问题或者哪里说的不对希望大家多多指正。

GPU云服务器云服务器自适应宽度宽度自适应自适应宽度按钮 rem宽度自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112196.html

CSS布局十八般武艺都在这里了

摘要：清单一些说明注意文档的书写顺序，先写两侧栏，再写主面板，更换后则侧栏会被挤到下一列圣杯布局和双飞翼布局都会用到。可以通过设置的属性或使用双飞翼布局避免问题。双飞翼布局不用设置相对布局，以及对应的和值。本文首发于知乎专栏：前端指南 CSS布局布局是CSS中一个重要部分，本文总结了CSS布局中的常用技巧，包括常用的水平居中、垂直居中方法，以及单列布局、多列布局的多种实现方式（包括传统的...

includecmath 2019-08-29 12:17 评论0 收藏0
CSS 布局经典问题初步整理

摘要：布局经典问题初步整理标签前端本文主要对布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负，清除浮动，居中布局，响应式设计，布局，等等。 CSS 布局经典问题初步整理标签：前端 [TOC] 本文主要对 CSS 布局中常见的经典问题进行简单说明，并提供相关解决方案的参考链接，涉及到三栏式布局，负 margin，清除浮动，居中布局，响应式设计，Fl...

Amos 2019-08-29 12:36 评论0 收藏0
CSS布局

摘要：圣杯布局圣杯布局和双飞翼布局都是为了解决两边定宽，中间自适应的三栏布局，中间栏在最前面优先渲染，多见于商城类网站布局。双飞翼布局不用设置相对布局，以及对应的和值。合理的布局是产品的基础，可以使人感觉整齐大方，提升用户体验。掌握几种常见的布局形式也是前端开发的基础，对于快速实现页面重构有很大帮助。原文链接单列布局单列布局通常用于网站的首页，分为头部的导航、网页内容、页脚相关信息。...

kviccn 2019-08-30 13:46 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

FuisonDesign 2019-08-23 12:57 评论0 收藏0
几种常见的CSS布局

摘要：本文概要本文将介绍如下几种常见的布局其中实现三栏布局有多种方式，本文着重介绍圣杯布局和双飞翼布局。借助等高布局正负可解决，下文会介绍双飞翼布局特点同样也是三栏布局，在圣杯布局基础上进一步优化，解决了圣杯布局错乱问题，实现了内容与布局的分离。本文概要本文将介绍如下几种常见的布局： showImg(https://segmentfault.com/img/remote/14600000...

andot 2019-08-02 11:58 评论0 收藏0