CSS布局（圣杯布局，双飞翼布局）

最新推荐文章于 2022-11-07 16:45:15 发布

秋刀鱼丢了水蜜桃

最新推荐文章于 2022-11-07 16:45:15 发布

阅读量212

点赞数 2

分类专栏： CSS学习笔记文章标签： CSS

本文链接：https://blog.csdn.net/qq_37354459/article/details/89052678

版权

CSS学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

圣杯布局

特点

DOM元素的书写顺序不得更改。
主面板部分优先渲染（一般主面板会比侧栏内容重要）。
当面板的middle内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置middle的min-width属性或使用双飞翼布局避免问题。

布局步骤

三者都设置向左浮动
设置middle宽度为100%，设置两侧栏的宽度。
设置负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度
设置middle的padding值给左右两个子面板留出空间。
设置两个子面板为相对定位，left的left值为负的left宽度，right的right值为负的right宽度。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圣杯布局</title>
</head>
<style type="text/css">
    .middle {        
    float: left;       
    width: 100%; 
    background-color:red;
    }  
    .left {       
        float: left;        
        width: 190px;        
        margin-left: -100%;               
        position: relative;  
        left: -190px;  
        background-color: gray;  
    }   
    .right {        
        float: left;        
        width: 230px;        
        margin-left: -230px; 
        position: relative; 
        right: -230px;  
        background-color: gray;
    }
    .container {        
        padding: 0 230px 0 190px;   
    }
</style>
<body>
    <div class="container">
        <div class="middle">middle</div>
        <div class="right">right</div>
        <div class="left">left</div>
    </div>
</body>
</html>

圣杯布局

双飞翼布局

特点

主面板部分优先渲染（一般主面板会比侧栏内容重要）。
圣杯采用的是padding，而双飞翼采用的margin，解决了圣杯布局middle的最小宽度不能小于左侧栏的缺点。
双飞翼布局不用设置相对布局，以及对应的left和right值。
通过引入相对布局，可以实现三栏布局的各种组合，例如对右侧栏设置position: relative; left: 190px;可以实现left+right+middle的布局。

布局步骤

三者都设置向左浮动。
设置container宽度为100%，设置两个侧栏的宽度。
设置负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。
设置middle的margin值给左右两个子面板留出空间。

代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<style type="text/css">
    .container {        
        float: left;       
        width: 100%;   
    }  
    .left {       
    float: left;        
    width: 190px;        
    margin-left: -100%;   
    background-color:gray;
    }   
    .right {        
        float: left;        
        width: 230px;        
        margin-left: -230px; 
        background-color:gray;
    }
    .middle {    
        margin: 0 230px 0 190px;
        background-color:red;
    }
</style>
<body>
        
    <div class="container">
        <div class="middle">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</body>
</html>

双飞翼布局

秋刀鱼丢了水蜜桃

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
CSS布局（圣杯布局，双飞翼布局）

圣杯布局特点DOM元素的书写顺序不得更改。主面板部分优先渲染（一般主面板会比侧栏内容重要）。当面板的middle内容部分比两边的子面板宽度小的时候，布局就会乱掉。可以通过设置middle的min-width属性或使用双飞翼布局避免问题。布局步骤三者都设置向左浮动设置middle宽度为100%，设置两侧栏的宽度。设置负边距，left设置负左边距为100%，right设置负左边距...
复制链接

扫一扫