CSS垂直三列居中，中间自适应

最新推荐文章于 2023-04-25 15:27:45 发布

xiaozhen0610

最新推荐文章于 2023-04-25 15:27:45 发布

阅读量208

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog_h2ikjhhjbkkj.html

版权

前端专栏收录该内容

844 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* 让页面的高100%，如果不设置html，body 高100%的话，我们后面设置div高100%就没有效果了 */
        html,body{
            width:100%;
            height:100%;
        }
        body,div{
            margin:0;
            padding:0;
        }
        /* 注意这里我给盒子添加了一个右边padding200px ，让中的那个盒子空200px给右边的盒子*/
        #box{
            position:relative;
            padding-right:200px;
            height:100%;
        }
        /* 让盒子左浮动 */
        #box .left{
            float:left;
            width:200px;
            height:100%;
            background-color:blue;
        }
        /* overflow让盒子独立出来，触动BFC，这里不设置overflow:hidden;的话他的宽就是100%了，但是我需要让他把左边的盒子的宽度空出来 */
        #box .con{
            overflow:hidden;
            height:100%;
            background-color:pink;
        }
        /* 这里不能设置浮动，只能是定位，因为中间的那个盒子没有浮动，所以中间的那个盒子会占据位置，只能用定位来做。 */
        #box .right{
            position:absolute;
            right:0;
            top:0;
            width:200px;
            height:100%;
            background-color:#000;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="left"></div>
        <div class="con"></div>
        <div class="right"></div>
    </div>
</body>
</html>

xiaozhen0610

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS垂直三列居中，中间自适应

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> /* 让页面的高100%，如果不设置html，body 高100%的话，我们后面设置div高100%就没有效果了 */ html,body{ width:1.
复制链接

扫一扫