三栏布局相关问题

最新推荐文章于 2024-10-04 22:04:56 发布

非常规程序媛

最新推荐文章于 2024-10-04 22:04:56 发布

阅读量96

点赞数

文章标签： html css

本文链接：https://blog.csdn.net/qq_39344725/article/details/105547939

版权

三栏布局相关问题

右边固定宽度，左边两栏等比分布

浮动+外边距

<!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{
            margin-right: 100px;
            /* float: left; */
        }
        .left{
            height: 100px;
            background-color: red;
            float: left;
            width: 50%;
        }
        .right{
            height: 100px;
            width: 100px;
            float:right;
            background-color: rgb(0, 110, 255);
        }
        .center{
            height: 100px;
            float: left;
            width: 50%;
            background-color: rgb(255, 0, 149);
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
    </div>
    <div class="right"></div>
</body>
</html>

上述代码中，我们将右侧进行右浮动，并且设置固定宽度。左边两栏放到一个div中进行左浮动，并且为div设置margin-right：右边盒子宽度。这样就右边固定宽度，左边宽度等比分布了

中间固定宽度，左右两边自适应

使用display：flex

<!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{
            display: flex;
        }
        .left{
            height: 100px;
            background-color: red;
            width: 100%;
        }
        .right{
            height: 100px;
            width: 100%;
            background-color: rgb(0, 110, 255);
        }
        .center{
            height: 100px;
            width:100px;
            background-color: rgb(255, 0, 149);
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="center"></div>
        <div class="right"></div>
    </div>
    
</body>
</html>

中间自适应两边固定宽度

使用浮动

<!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{
            display: flex;
        } */
        .left{
            height: 100px;
            background-color: red;
            /* width: 100%; */
            float: left;
            width:100px;
        }
        .right{
            height: 100px;
            width:100px;
            float: right;
            background-color: rgb(0, 110, 255);

        }
        .center{
            height: 100px;
            overflow: hidden;
            background-color: rgb(255, 0, 149);
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    
</body>
</html>

这里需要注意的是下面的dom元素中center必须排列在最下面

三栏等比分布

<!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{
            display: flex;
        } */
        .left{
            height: 100px;
            background-color: red;
            /* width: 100%; */
            float: left;
            margin:0 2.5%;
            width:30%;
        }
        .right{
            height: 100px;
            width:30%;
            margin-right: 2.5%;
            float: left;
            background-color: rgb(0, 110, 255);

        }
        .center{
            height: 100px;
            width:30%;
            float: left;
            margin-right: 2.5%;
            background-color: rgb(255, 0, 149);
        }
        /* 添加背景颜色的原因是更方便观看 */
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="center"></div>
    </div>
    
</body>
</html>

三栏等比分布的话，必定会留下空隙，所以只能等比等间距使用css计算来分布