前端基础知识备忘录——经典布局方案之双飞翼布局

最新推荐文章于 2023-08-09 10:39:48 发布

星河阅卷

最新推荐文章于 2023-08-09 10:39:48 发布

阅读量238

点赞数

分类专栏： css 文章标签： css 双飞翼布局经典布局方案

本文链接：https://blog.csdn.net/u010651383/article/details/97620197

版权

css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前言
- 在pc网站开发中，左中右三栏式布局算是相当常见的一种布局方式，其中双飞翼布局是有淘宝UED团队提出来的一种左中右三栏式布局的解决方案，主要是为了让中间部分的主要内容提前渲染，以达到优先渲染和显示最重要内容的目的，下面，就来分析一下双飞翼布局的实现方式与原理。
分析

为左中右三栏的标签添加一个共同的父级标签（目的是可以通过改变该标签的宽度与位置从而控制整个三栏式布局的宽度与位置）
将中栏主要内容区域提前，并在中栏内部增加用于展示主要内容的内容区，左右两栏依次放于其后（目的是为了让主要内容区优先渲染。由于中栏内容区占满一行，会将左右两栏无法同行排列，变回被挤到下一行，通过步骤4可归位左右栏）
将左中右三栏设置为浮动
归位左右栏，左栏通过
```
margin-left: -100%;
```
即向左移动一个中间内容区的宽度已达到归位内容区左侧的目的；右栏通过
```
margin-left:-200px;
```
即向左移动自身宽度已达到归位内容区右侧的目的。
此时已初步达到左中右三栏式布局，但左右两栏仍会压住中部内容区，采用为中栏内容区设置
```
margin: 0 200px;
```
使得中部内容区左右各空出左右栏的宽度的空隙

代码

html:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }
        
        body,
        html {
            height: 100%;
        }
        
        .warp {
            width: 80%;
            height: 100%;
            margin: 0 auto
        }
        
        #left {
            width: 200px;
            height: 100%;
            background-color: orange;
            float: left;
            margin-left: -100%;
        }
        
        #right {
            width: 200px;
            height: 100%;
            background-color: orange;
            float: left;
            margin-left: -200px;
        }
        
        #main {
            background: greenyellow;
            width: 100%;
            height: 100%;
            float: left;
        }
        
        #content {
            height: 100%;
            margin: 0 200px
        }
    </style>
</head>

<body>
    <div class="warp">
        <section id='main'>
            <div id="content">content</div>
        </section>
        <aside id='left'>left</aside>
        <aside id='right'>right</aside>

    </div>
</body>

</html>

星河阅卷

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端基础知识备忘录——经典布局方案之双飞翼布局

前言在pc网站开发中，左中右三栏式布局算是相当常见的一种布局方式，其中双飞翼布局是有淘宝UED团队提出来的一种左中右三栏式布局的解决方案，主要是为了让中间部分的主要内容提前渲染，以达到优先渲染和显示最重要内容的目的，下面，就来分析一下双飞翼布局的实现方式与原理。分析为左中右三栏的标签添加一个共同的父级标签（目的是可以通过改变该标签的宽度与位置从而控制整个三栏式布局的宽度...
复制链接

扫一扫