圣杯布局的骚写法

笔试的时候，倒在了布局上，实现圣杯布局

刚开始搞过，当时也是别人的方法，所以，对整个需求和实现都记的不清了。
现在总结一下，另外附上自己最简单的写法：

圣杯布局的目的

1.三栏展示
2.让中间的div优先加载，中间的div在dom中要提前

实现方式

我看了一下网上了，思路都很乱
我来个简单的吧
1.将calc进行到底
2.使用margin负值

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <div class="main">2222</div>
        <div class="left">1111</div>
        <div class="right">333</div>
    </div>
    <style>
       /* 使用calc+margin负值 */
        .main{
            height: 800px;
            float: left;
            background: #000;

            width: calc(100% - 200px);
            margin-left: 100px;
            }
        .left{
            height: 800px;
            float: left;
            background: red;
            width: 100px;
            /* 在不考虑性能的情况下，在css中计算，这里将calc进行到底，感觉比网上的逻辑清晰很多 */
            margin-left: calc(-100% + 100px);
            }
        .right{
            height: 800px;
            float: left;
            background: green;
            width: 100px;
            }
    </style>
</body>
</html>
posted @ 2020-07-28 14:34  风意不止  阅读(193)  评论(0)  编辑  收藏  举报