用css实现圣杯布局（多种方法）

最新推荐文章于 2024-04-19 05:54:56 发布

代码包工头

最新推荐文章于 2024-04-19 05:54:56 发布

阅读量235

点赞数 4

文章标签： html css

本文链接：https://blog.csdn.net/m0_56435537/article/details/115913286

版权

答案

(1) :利用定位实现左侧固定右侧自适应

1.1) :父盒子设置左边padding值

1.2) :给左盒子的width设置父盒子的padding值,然后定位到padding处
1.3):右边盒子自适应

具体代码:

<!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>
        .father {
            height: 400px;
            background-color: rgba(255, 192, 203, 0.374);
            position: relative;
            border: 1px solid black;
            padding-left: 200px;
        }

        .left {
            width: 200px;
            height: 400px;
            background-color: rgb(248, 202, 246);
            position: absolute;
            top: 0;
            left: 0;
        }

        .right {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

(2) :利用flex布局实现左边固定右边自适应

2.1):父盒子设置display弹性盒子

2.2):左边盒子设置固定宽高

2.3):右边盒子设置flex:1

具体代码:

<!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>
        .father {
            height: 400px;
            background-color: rgba(255, 192, 203, 0.374);
            border: 1px solid black;
            display: flex;
        }

        .left {
            width: 200px;
            height: 400px;
            background-color: rgb(248, 202, 246);
        }

        .right {
            flex: 1;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

(3):利用bfc块级格式化上下文,实现左侧固定右边自适应

3.1):左边固定宽高,进行浮动

3.2):中间overflow:hidden

具体代码:

<!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>
        .father {
            height: 400px;
            background-color: rgba(255, 192, 203, 0.374);
        }

        .left {
            float: left;
            width: 200px;
            height: 400px;
            background-color: rgb(248, 202, 246);
        }

        .right {
            height: 400px;
            background-color: aqua;
            overflow: hidden;
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

</html>

代码包工头

关注

4
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
用css实现圣杯布局（多种方法）

答案(1) :利用定位实现左侧固定右侧自适应1.1) :父盒子设置左边padding值1.2) :给左盒子的width设置父盒子的padding值,然后定位到padding处1.3):右边盒子自适应具体代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE.
复制链接

扫一扫