CSS中经典的双飞翼布局(

笔者在一些博客和论坛中经常看到经典的双飞翼布局，淘宝的首页也运用了这种兼容性很好的双飞翼布局

1.何谓双飞翼布局？

简单来说，双飞翼布局是将一个网页分为左列，中列和右列三部分，并且我们要得到的效果是：

左列和右列宽度恒定，中间列的宽度根据浏览器窗口的大小自适应。

2.如何实现双飞翼布局？

（1）首先我们要得到如下的布局样式：

       <div class="container"><div class="column" id="center_panel"></div><div class="column" id="right_panel"></div><div class="column" id="left_panel"></div></div>

      可以看到我们在外层用一个类名为：container的大的div包裹。而内层分为了我们所说的三列

    但是注意，在整个dom结构中，主列位于最前面

   （2）让列开始浮动

    我们让列全部浮动起来

    .column{

     float:left

    并设置

    .container{

    width:100%;

    .center_panel{

    width:100%;

    于是在这种情况下，center_panel已经占据了整个container父元素的全部宽度，并且这个宽度是自适应的

   （3）如何实现左右列固定宽度

    在实现左右列固定宽度时，我们这里采用了margin负值

    首先，得到左列固定宽度，我们会有：

      #right_panel{

             width:300px;

             margin-left:-100%;}

       这里我们假设，固定宽度的左列宽度为300px,当margin-left:-100%之时，这个左边列会脱离自己所在行，向上一行浮动，

       效果为：

       此时我们实现了左列固定宽度，中间列自适应

       再次，我们根据同样原理，定义右列的浮动偏移（margin负值）

         #left_panel{

             width:300px;

             margin-left:-300px;

        这样，我们就实现了我们所需要的双飞翼布局，也就是中间列宽度自适应，左列和右列的宽度固定

        我们所得到的效果为：

     3.双飞翼布局的优点

      （1）兼容性好，兼容若有主流浏览器，包括万恶的IE6

      （2）因为在DOM中center_panel在三列结构的最前面，因此可以实现主要内容的优先加载

CSS中经典的双飞翼布局(相关推荐

css中盒子模型的布局
目录一水平布局二垂直布局 css中的盒子模型布局分为两种:水平布局和垂直布局一水平布局盒子模型中水平方向影响因素有7个,分别是:margin-left border-left padd ...
css什么是自适应布局,CSS中常见的自适应布局是什么
CSS中常见的自适应布局是什么发布时间:2020-12-05 13:24:07 来源:亿速云阅读:102 作者:小新这篇文章主要介绍CSS中常见的自适应布局是什么,文中介绍的非常详细,具有一定的 ...
【CSS】圣杯、双飞翼布局
[CSS]圣杯.双飞翼布局文章目录 [CSS]圣杯.双飞翼布局圣杯布局基本布局样式接下来要把主区域移动到中间把右区域放在主区域的右边移动左右区域,防止两边挡住中间完整代码双飞翼布局基 ...
css的经典三栏布局如何实现,css 实现三栏布局的四种方式
三栏布局就是左中右,左右两边固定,中间自适应. 1. 绝对定位左边中间右边 body { padding: ; margin: ; } /* 绝对定位 */ .left, .right { po ...
css中如何实现帧布局_浅谈web前端中的表格布局与CSS盒子布局
在web前端设计排版时我们可能会用到表格布局和div+CSS布局,但现在主要使用后者,为何?今天我们来谈一谈两者之间的发展和原理. 话不多说下面来干货发展过程上个世纪Web开发人员流行使用表格进行 ...
css基础知识十：介绍一下CSS中的Grid网格布局?
一.是什么 Grid 布局即网格布局,是一个二维的布局方式,由纵横相交的两组网格线形成的框架性布局结构,能够同时处理行与列擅长将一个页面划分为几个主要区域,以及定义这些区域的大小.位置.层次等关系 ...
css中如何实现帧布局_如何在游戏中实时显示硬件占用率和帧数
很多的的硬件评测视频中,游戏画面的左上角会显示硬件的使用情况参数,像CPU和GPU的占用率,内存和显存使用,温度等.有不少的朋友有疑问,这是怎么做到的? 其实这个事情不难,只需要一款软件就可以做到,名 ...
CSS中使用flex弹性布局实现上下左右垂直居中排列并设置子元素之间的间距
场景 Flex是Flexible Box的缩写,意为"弹性布局". 怎样使用弹性布局实现页面上下两个元素上下左右垂直居中排列. 实现如下类似布局最外层是是一个div,div里面是 ...
css中如何实现帧布局_?如何在Python中加入多个数据帧？
全文共2235字,预计学习时长7分钟来源:Pexels 初学Python编程的人,面临的是各种未知的挑战. 下面是一个几乎让所有更有抱负的数据科学家都感到意外的场景:你正在处理一个从多个源收集数据的 ...

CSS中经典的双飞翼布局(

CSS中经典的双飞翼布局(相关推荐

最新文章

热门文章