三栏布局！

最新推荐文章于 2022-08-06 12:13:59 发布

源@

最新推荐文章于 2022-08-06 12:13:59 发布

阅读量39

点赞数

文章标签： css

本文链接：https://blog.csdn.net/weixin_48727085/article/details/118306603

版权

左右固定，中间计算

<!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>三栏布局，两侧固定，中间auto</title>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        #container{
            display:flex;
            white-space:nowrap;
            width:80%;
            height:600px;
            border:2px solid black;
            margin:0 auto;
        }
        #container .left{
            width:150px;
            height:100%;
            background-color:lightcoral;
            flex:0 0 auto;
            overflow:hidden;
        }
        #container .center{
            width:100%;
            height:100%;
            background-color:lightblue;
            flex:1 1 auto;
            overflow:hidden;
        }
        #container .right{
            width:150px;
            height:100%;
            background-color:lightcoral;
            flex:0 0 auto;
            overflow:hidden;
        }
    </style>
</head>
<body>
    <div id="container">
        <div class="left">左侧固定宽度左侧固定宽度左侧固定宽度左侧固定宽度左侧固定宽度</div>
        <div class="center">中间占满剩余宽度中间占满剩余宽度中间占满剩余宽度中间占满剩余宽度</div>
        <div class="right">右侧固定宽度右侧固定宽度右侧固定宽度右侧固定宽度右侧固定宽度</div>
    </div>
</body>
</html>

源@

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
三栏布局！

左右固定，中间计算<!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"> <ti
复制链接

扫一扫