css双飞翼布局

cyqian 发布于2019-08-01 17:07 / 1184人阅读

摘要：引言曾经在江湖上盛传的双飞翼布局，无人不知，无人不晓。双飞翼布局之我的实现主内容栏自适应宽度侧边栏固定宽度侧边栏固定宽度第一种利用布局的属性，轻松实现。

引言

曾经在江湖上盛传的双飞翼布局，无人不知，无人不晓。大概的意思就是左右两边盒子固定宽度，剩下中间部分自由缩放，考虑到一般网站的主体部分在中间，用户首先需要看到的是中间部分。所以将中间的div放在最上方，如下图所示。

双飞翼布局经典实现

// HTML部分

    
        主内容栏自适应宽度
    

    
        侧边栏1固定宽度
    

    
        侧边栏2固定宽度
    


//css部分
.container {
    position: relative;
    width: 100%;
}
.container > div {
    position: absolute;
}
.main {
    width: 100%;
    padding: 0 200px;
    box-sizing: border-box;
}
.aside-1 {
    width: 200px;
    top: 0;
    left: 0;
}
.aside-2 {
    width: 200px;
    top: 0;
    right: 0;
}

双飞翼布局是IE6横行时期，人们不得已采用的方法，不好理解，写起来也很麻烦。今天我运用两种现在浏览器支持的css属性，简化一下代码。

双飞翼布局之我的实现

 // html

    
        
            主内容栏自适应宽度
        
    

    
        侧边栏1固定宽度
    

    
        侧边栏2固定宽度

第一种:

// 利用flex布局的order属性，轻松实现。
.container {
    display: flex;
    width: 100%;
}

.main {
    flex: 1;
    order: 2;
}

.aside-1 {
    flex: 0 0 200px;
    order: 1;
}
 
 .aside-2 {
    flex: 0 0 200px;
    order: 3;
 }

//利用绝对定位，加上box-sizing，也能实现的效果。
.container {
    width: 100%;
}

.container > div {
    float: left;
}

.main {
    width: 100%;
}
.middle {
    margin: 0 200px;
}
.aside-1 {
    width: 200px;
    margin-left: -100%;
}
 
 .aside-2 {
    width: 200px;
    margin-left: -200px;
 }

如上可知，随着前端发展的滚滚大潮所谓的双飞翼、圣杯布局中间会被历史淘汰，迎来新的时期。

云服务器 GPU云服务器双飞翼布局 css布局 css布局教程学习css布局

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

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

css双飞翼布局

摘要：引言曾经在江湖上盛传的双飞翼布局，无人不知，无人不晓。双飞翼布局之我的实现主内容栏自适应宽度侧边栏固定宽度侧边栏固定宽度第一种利用布局的属性，轻松实现。引言曾经在江湖上盛传的双飞翼布局，无人不知，无人不晓。大概的意思就是左右两边盒子固定宽度，剩下中间部分自由缩放，考虑到一般网站的主体部分在中间，用户首先需要看到的是中间部分。所以将中间的div放在最上方，如下图所示。 showImg...

CarterLi 2019-08-29 12:53 评论0 收藏0
CSS布局--圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

摘要：圣杯布局双飞翼布局所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。双飞翼用在外层多加了一个然后改用。前言我曾一度觉得总写css的前端很low，有了这种思想以后我便远离网页布局，H5的工作更不想接，沉迷于页面逻辑和封装组件。直到最近我面试，面试官说我css3理解的不熟，我起初很不屑，但后来静...

zqhxuyuan 2019-08-30 14:11 评论0 收藏0
CSS 圣杯布局 / 双飞翼布局的实现

摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间自适应的布局 1 ，圣杯布局三栏布局 center left right footer 首先HTML结构...

Aldous 2019-04-23 11:40 评论0 收藏0
CSS 圣杯布局 / 双飞翼布局的实现

摘要：先让它们浮动，并给和一个固定宽度，宽度，清除浮动流，结果变成上面这样。工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间自适应的布局 1 ，圣杯布局 !--三栏布局-- header 三栏布局 /header div div cent...

LuDongWei 2019-04-22 16:34 评论0 收藏0