圣杯与双飞燕

最新推荐文章于 2021-08-04 04:10:36 发布

heartlh

最新推荐文章于 2021-08-04 04:10:36 发布

阅读量194

点赞数

分类专栏： CSS 文章标签：圣杯双飞翼 Flex CSS

本文链接：https://blog.csdn.net/qq_40929674/article/details/79017470

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

圣杯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {padding: 0;margin: 0;}
        .container {min-width: 600px;padding: 0 200px 0 200px;}
        header {height: 100px;background-color: #ccc;}
        .main {width: 100%;background-color: red;height: 200px;float: left;overflow-wrap: break-word;}
        .left {width: 200px; background-color: blue;float: left;height: 200px;margin-left: -100%;
            position: relative;left: -200px;}
        .right {width: 200px; background-color: green;float: left;height: 200px;margin-left: -200px;
            position: relative;right: -200px;}

         footer {height: 100px;background-color: #ccc;clear: both;}
    </style>
</head>
<body>
    <header></header>
    <div class="container">

        <div class="main"><div class="mainContainer">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div></div>

        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

双飞燕

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {padding: 0;margin: 0;}
        .container {min-width: 600px;/*padding: 0 200px 0 200px;*/}
        header {height: 100px;background-color: #ccc;}
        .main {width: 100%;background-color: red;height: 200px;float: left;overflow-wrap: break-word;}
        .left {width: 200px; background-color: blue;float: left;height: 200px;margin-left: -100%;
            /*position: relative;left: -200px;*/}
        .right {width: 200px; background-color: green;float: left;height: 200px;margin-left: -200px;
           /* position: relative;right: -200px;*/}
        .mainContainer {
            padding: 0 200px 0 200px;
        }
         footer {height: 100px;background-color: #ccc;clear: both;}
    </style>
</head>
<body>
    <header></header>
    <div class="container">

        <div class="main"><div class="mainContainer">abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz</div></div>

        <div class="left"></div>
        <div class="right"></div>
    </div>
    <footer></footer>
</body>
</html>

在用float 和 负margin实现的三栏式布局后发现：main部分被左右两栏覆盖，导致内容不能全部显示。

圣杯模式用给三栏的父容器container增加padding属性的同时让左右两栏通过relation定位+left/right 移到父容器padding出的位置，从而实现显示main的全部内容。

双飞翼不用上述的方法，而是给main里面再套一层mainContainer 只要加上加上 padding: 0 200px 0 200px;即可。

当然，不用考虑浏览器兼容性的问题的话 flex 无疑是最为方便的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body {min-height: 100vh;}
        header{height: 50px; background-color: #add;}
        footer{height: 50px; background-color: #add;}
        .content{
            display: flex;
            height: 100vh;

        }
        aside{width: 120px;
            background-color: #444;
            order: 1;
        } 
        main{
            background-color: red;
            /*height: 400px;*/
            flex: 1;
            order: 2;
        }
        nav{width: 100px;background-color: green;order: 3}

        @media all and (max-width: 600px) {
            .content {flex-direction: column;
                /*align-items: stretch;*/}
            nav, aside {height: 50px; width: auto;}
            nav, aside, main {order: 0;}
        }
    </style>
</head>
<body>
    <header>

    </header>
    <div class="content">
        <main></main>
        <aside></aside>
        <nav></nav>
    </div>
    <footer></footer>
</body>
</html>