css经典布局方式之圣杯与双飞翼

最新推荐文章于 2024-07-11 22:36:37 发布

qq_44855897

最新推荐文章于 2024-07-11 22:36:37 发布

阅读量139

点赞数

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

本文链接：https://blog.csdn.net/qq_44855897/article/details/108165328

版权

html&css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

css布局方式之圣杯与双飞翼

- - 圣杯布局
  - 双飞翼布局

圣杯布局

1,什么是圣杯布局?
　　　所谓圣杯布局就是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局

2，构建圣杯布局的步骤：
　　　　2.1，添加一个容器，在这个容器中添加放三个盒子（左、中、右）；
　　　　2.2，设置两侧盒子（左、右）的宽度，使其宽度固定；
　　　　2.3，设置中间盒子的宽度为100%，这是中间盒子宽度自适应的关键；
　　　　2.4，设置容器的padding-left和padding-right属性，属性值分别为左盒子的宽度和右盒子的宽度；
　　　　2.5，让三个盒子都向左浮动，向右浮动可能会出现问题，所以都设置向左浮动；
　　　　2.6，设置左盒子的margin-left属性为-100%；
　　　　2.7，通过相对定位调整左边的盒子, 使左边的盒子不盖住中间盒子的区域；
　　　　2.8，设置右边盒子的margin-left属性为负的自身的宽度；
　　　　2.9，同样的通过相对定位调整右边的盒子, 使右边的盒子不盖住中间盒子的区域；
　　　　2.10，最后一步就是给容器设置一个最小宽度min-width属性，防止它缩小后变形。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            padding: 0 200px;
            height: 100px;
            min-width: 400px;
        }
        .left, .right {
            width: 200px;
            height: 100px;
            background-color: green;
            float: left;
        }
        .left{
            margin-left: -100%;
            position: relative;
            left: -200px;
        }
        .right{
            margin-left: -200px;
            position: relative;
            right: -200px;
        }
        .middle{
            width: 100%;
            height: 100px;
            background-color: red;
            float: left;
        }

    </style>
</head>

<body>
    <div class="box">
        <div class="middle"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
</html>

双飞翼布局

1，什么是双飞翼布局　　
　　　和圣杯布局一样，双飞翼布局也是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局，就是布局的形式上存在差异　　　　
2，构建双飞翼布局的步骤
　　　　2.1，添加一个容器，在这个容器中添加三个盒子（左、中、右）；
　　　　2.2，设置两侧盒子（左、右）的宽度，使其宽度固定；
　　　　2.3，设置中间盒子的宽度为100%，这也是双飞翼布局中中间盒子宽度自适应的关键；
　　　　2.4，让三个盒子都向左浮动，向右浮动可能会出现问题，所以都设置向左浮动；
　　　　2.5，再给中间的盒子添加一个子盒子；
　　　　2.6，设置子盒子margin-left和margin-right属性，属性值分别为左盒子的宽度和右盒子的宽度；
　　　　2.7，设置左盒子的margin-left属性为-100%；
　　　　2.8，设置右边盒子的margin-left属性为负的自身的宽度；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .left, .right{
            width: 200px;
            height: 200px;
            background-color: skyblue;
            float: left;
        } 
        .left{
            margin-left: -100%;
        }
        .right{
            margin-left: -200px;
        }  
        .center{
            width: 100%;
            height: 200px;
            float: left;
        }
        .center>.center_in{
            margin: 0 200px;
            height: 200px;
            background-color: yellow;
        }
        .box{
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="center">
            <div class="center_in"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

qq_44855897

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css经典布局方式之圣杯与双飞翼

css布局方式之圣杯与双飞翼圣杯布局双飞翼布局圣杯布局1,什么是圣杯布局?　　　所谓圣杯布局就是用于实现一个两侧宽度固定，中间宽度自适应的三栏布局2，构建圣杯布局的步骤：　　　　2.1，添加一个容器，在这个容器中添加放三个盒子（左、中、右）；　　　　2.2，设置两侧盒子（左、右）的宽度，使其宽度固定；　　　　2.3，设置中间盒子的宽度为100%，这是中间盒子宽度自适应的关键；　　　　2.4，设置容器的padding-left和padding-right属性，属性值分别为左盒子的宽度和右盒子
复制链接

扫一扫