css布局双飞翼布局圣杯布局flex，float

最新推荐文章于 2024-06-13 11:11:12 发布

A_hapiness

最新推荐文章于 2024-06-13 11:11:12 发布

阅读量107

点赞数 2

分类专栏： css+html 文章标签： css html

本文链接：https://blog.csdn.net/A_hapiness/article/details/119993694

版权

css+html 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，

圣杯布局flex

   <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .top,.bottom{
            height: 25px;
            background-color: #999;
            line-height: 25px;
            text-align: center;
        }
        .content{
            display: flex;
            line-height: 100px;
            text-align: center;
        }
        .float{
            height: 100px;
        }
        #left{
            width: 100px;
            background-color:red;
        }
        #mid{
            flex: 1;
            background:blue;
        }
        #right{
            width: 150px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="top">头部</div>
    <div class="content">
        <div id="left" class=float>左栏宽度固定</div>
        <div id="mid" class=float>中间内容宽度自适应</div>
        <div id="right" class=float>右栏宽度固定</div>
    </div>
    <div class="bottom">底部</div>
</body>

圣杯布局 float

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        .top,.bottom{
            height: 20px;
            background: #999;
        }
       .float{
           float: left;
           height: 80px;
       }
       .content::after{
           content:"";
           display: block;
           clear: both;
           overflow: hidden;
           zoom: 1;
       }
       .content{
           line-height: 80px;
           padding-left: 100px;
           padding-right: 150px;
       }
       #mid{
           width: 100%;
           background-color: pink;
       }
       #left{
           width: 100px;
           background-color:tomato;
           position: relative;
           left: -100px;
           margin-left: -100%;
       }
       #right{
           width: 150px;
           background-color: aqua;
           margin-right: -150px;
       }
    </style>
</head>
<body>
    <div class="top">头部</div>
    <div class="content">
        <div id="mid" class=float>中间内容宽度自适应</div>
        <div id="left" class=float>左栏宽度固定</div>
        <div id="right" class=float >右栏宽度固定</div>
    </div>
    <div class="bottom">底部</div>
</body>
</html>

A_hapiness

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css布局双飞翼布局圣杯布局flex，float

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，方法1 圣杯布局flex <style> *{ margin: 0px; padding: 0px; } .top,.bottom{ height: 25px; background-color: #999; line-height...
复制链接

扫一扫