圣杯布局和双飞翼布局

1 圣杯布局
是由一个div包裹，里面分别是中左右三列，采用的是padding，margin-left,margin-right,position

<html>
<head>
    <style>
        #container {
            padding-left: 200px; 
            padding-right: 150px;
        }

        #container .column {
           float: left;
        }

        #center {
           width: 100%;
           background: #f00;
        }

        #left {
            width: 200px; 
            margin-left: -100%;
            position: relative;
            right: 200px;
            background: #ff0
        }

        #right {
            width: 150px; 
            margin-right: -150px; 
            background: #000;
        }
            
    </style>
</head>

<body>
        <div id="header"></div>
        <div id="container">
          <div id="center" class="column">
              I am center
          </div>
          <div id="left" class="column">
              I am left
          </div>
          <div id="right" class="column">
              I am right
          </div>
        </div>
        <div id="footer"></div>
</body>
<script>
</script>

</html>

2 双飞翼布局
采用的是居中的用div包裹，中间的设置margin，然后还是设置maring-left

<html>
<head>
    <style>
        #container {
            width:100%;     
        }

        .column {
           float: left;
        }

        #center {
           margin-left: 200px;
           margin-right: 150px;
           background: #f00;
        }

        #left {
            width: 200px; 
            background: #ff0;
            margin-left: -100%;
        }

        #right {
            width: 150px; 
            background: #000;
            margin-left: -150px;
        }
            
    </style>
</head>

<body>
        <div id="container" class="column">
          <div id="center">
              I am center
          </div>
        </div>
        <div id="left" class="column">
            I am left
        </div>
        <div id="right" class="column">
            I am right
        </div>
</body>
<script>
</script>

</html>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

圣杯布局和双飞翼布局

圣杯布局和双飞翼布局

相关阅读更多精彩内容

友情链接更多精彩内容