双飞翼布局

最新推荐文章于 2024-09-18 09:47:26 发布

yolo0927

最新推荐文章于 2024-09-18 09:47:26 发布

阅读量325

点赞数

分类专栏：布局文章标签： html css 布局

本文链接：https://blog.csdn.net/yolo0927/article/details/56678414

版权

布局专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在面试中碰到了这样一题，非常有意思，但也非常基础，然而我却忘了。。。忘了。。。。。。

需求:仅用html+css写出中间内容区域宽度自适应，两边宽度固定的布局，并且要求中间的内容区域要先被渲染。

很明显这是一个经典的三列布局，也就是圣杯布局中的一种，但是注意最后的一个需求，要求中间内容要先被渲染，也就是说我们要将中间的块放到最前面，让其先被浏览器渲染，这种布局方式叫‘双飞翼’，最先是由玉伯提出的，啊~多么优秀的工程师思维啊，不愧是玉伯，在淘宝这种拥有巨量请求的网站，让主题内容先渲染使用户优先看到，这直接就使用户体验提升了不止一个档次，不过淘宝一般两侧也是放广告，笑。。。听说后来玉伯走了，流言调侃：不会是因为让当时的广告没先出来吧，哈哈这只是笑话调侃下而已，大家不要较真~下面开始代码

//doubleWingsLayout.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html,body{
            width:100%;
            margin:0;
            padding:0;
        }
        .container{
            margin-left:150px;
            margin-right:200px;
        }
        .center{
            width:100%;
            background-color: orangered;
            height:200px;
            float: left;
        }
        .left{
            width:150px;
            height:180px;
            float: left;
            background-color: darkseagreen;
            margin-left: calc(-100% - 150px);
        }
        .right{
            width:200px;
            height:190px;
            float: right;
            background-color: cornflowerblue;
            margin-right:-200px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="center">左侧内容</div>
        <div class="left">主体内容</div>
        <div class="right">右侧内容</div>
    </div>
</body>
</html>

两边的margin值就是两个翼，很形象有木有 0 0，原理的话大家看css的代码就能看懂的了~