CSS三列布局中间自适应

最新更新时间:2020年08月01日09:09:51

《猛戳-查看我的博客地图-总有你意想不到的惊喜》

本文内容:本文汇总了常见的六种布局方案:浮动、绝对定位、flex、calc函数、圣杯布局、双飞翼布局

在这里插入图片描述

两侧左右浮动,中间设左右margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100px;
            height: 50px;
        }
        #left{
            float: left;
            width:10px;
            background: #CC0099;
            height: 100%;
        }
        #center{
            margin: 0 15px 0 10px;
            background: #5555ff;
            height: 100%;
        }
        #right{
            float: right;
            width: 15px;
            background: #CCFF00;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="right"></div>
    <div id="center">必须放最下</div>
</div>
</body>
</html>

两侧绝对定位,中间设左右margin

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100px;
            height: 50px;
            position: relative;
        }
        #left{
            position: absolute;
            left: 0;
            top: 0;
            width:10px;
            background: #CC0099;
            height: 100%;
        }
        #center{
            margin: 0 15px 0 10px;
            background: #5555ff;
            height: 100%;
        }
        #right{
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            background: #CCFF00;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="center">位置上中下均可</div>
    <div id="right"></div>
</div>
</body>
</html>

左中右绝对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100px;
            height: 50px;
            position: relative;
        }
        #left{
            position: absolute;
            left: 0;
            top: 0;
            width:10px;
            background: #CC0099;
            height: 100%;
        }
        #center{
        	position: absolute;
        	margin: auto;
            top: 0;
            bottom: 0;
            left: 10px;
            right: 15px;
            background: #5555ff;
            height: 100%;
        }
        #right{
            position: absolute;
            right: 0;
            top: 0;
            width: 15px;
            background: #CCFF00;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="center"></div>
    <div id="right"></div>
</div>
</body>
</html>

flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100px;
            height: 50px;
            display: flex;
            flex-direction: row;
        }
        #left{
            width:10px;
            background: #CC0099;
            height: 100%;
        }
        #center{
            /* 设置弹性盒子的放大比率flex-grow 设置弹性盒子的缩小比率flex-shrink 设置弹性盒伸缩基准值flex-basis*/
            /*flex: 0 1 auto; 默认值*/
            flex: 1;/* 三个等价 flex: 1 1 auto;flex: auto; */
            background: #5555ff;
            height: 100%;
        }
        #right{
            width: 15px;
            background: #CCFF00;
            height: 100%;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="center">必须放中间</div>
    <div id="right"></div>
</div>
</body>
</html>

calc()函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100px;
            height: 50px;
            font-size: 0;/* 消除子元素inline-block横向间距 */
        }
        #left,#center,#right{
            display: inline-block;
            height: 100%;
        }
        #left{
            width:10px;
            background: #CC0099;
        }
        #center{
            width: calc(100% - 10px - 15px);
            background: #5555ff;
        }
        #right{
            width: 15px;
            background: #CCFF00;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="left"></div>
    <div id="center">必须放中间</div>
    <div id="right"></div>
</div>
</body>
</html>

圣杯布局:父元素设左右padding,子元素设浮动和相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100px;
            height: 50px;
            padding: 0 15px 0 10px;
            box-sizing: border-box;/* center宽度为75 */
            /*box-sizing: content-box;!* center宽度为100 *!*/
        }
        #left,#center,#right{
            float: left;
            position: relative;
            height: 100%;
        }
        #left{
            width:10px;
            left: -10px;
            margin-left: -100%;
            background: #CC0099;
        }
        #center{
            width: 100%;
            background: #5555ff;
        }
        #right{
            width: 15px;
            right: -15px;
            margin-left: -15px;
            background: #CCFF00;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="center">必须放最上</div>
    <div id="left"></div>
    <div id="right"></div>
</div>
</body>
</html>

双飞翼布局:父元素设左右padding,子元素设浮动和相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #container{
            width: 100px;
            height: 50px;
        }
        #left,#wrap-center,#right{
            float: left;
            height: 100%;
        }
        #left{
            width:10px;
            margin-left: -100%;
            background: #CC0099;
        }
        #wrap-center{
            width: 100%;
            background: #5555ff;
        }
        #center{
            height: 100%;
            padding: 0 15px 0 10px;
        }
        #right{
            width: 15px;
            margin-left: -15px;
            background: #CCFF00;
        }
    </style>
</head>
<body>
<div id="container">
    <div id="wrap-center"><div id="center">必须放最上</div></div>
    <div id="left"></div>
    <div id="right"></div>
</div>
</body>
</html>

参考资料

感谢阅读,欢迎评论^-^

打赏我吧^-^

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页