tnblog
首页
精品
资源
登录
人生漫长转瞬即逝 , 有人见尘埃 , 有人见星辰
排名
6
文章
6
粉丝
16
评论
8
{{item.articleTitle}}
{{item.blogName}} : {{item.content}}
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2020TNBLOG.NET
技术交流:群号677373950
欢迎加群交流技术

实现一边固定,一边自适应宽度的布局

309人阅读 2020/8/20 16:19 总访问:372571 评论:2 手机 收藏
分类: CSS


使用flex布局的情况下,需要自定义宽度的div增加一个flex-grow:1即可

<div class="row">
    <div class="" style="flex-grow: 1; height: 500px;background:#000">
    </div>
    <div  style="background-color: #131313;height:500px;width:306px">
    </div>
</div>

这里外面的class="row",是bootstrap中使用了flex布局的


不用flex布局的情况下

有些时候用flex布局上面这样做,内容的动态改变会有点影响它,所以可以使用下面这种方法来做


1:左边固定宽度,右边自适应

<html>
<head>
    <title>Document</title>
    <style>

        baibody {
            margin: 0;
        }


        .stage {
            position: relative;
        }


        .left {
            position: absolute;
            left: 0;
            top: 0;
            background-color: #ffabcd;
            width: 200px;
            height: 500px;
        }


        .right {
            margin-left: 200px;
            background-color: #abcdff;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
</body>
</html>

看看效果:



2:左边自适应宽度,右边固定宽度

<html>
<head>
    <title>Document</title>
    <style>

        baibody {
            margin: 0;
        }


        .stage {
            position: relative;
        }


        .right {
            position: absolute;
            right: 0;
            top: 0;
            background-color: #131313;
            width: 300px;
            height: 500px;
        }

        .left {
            margin-right: 300px;
            background-color: orange;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="stage">
        <div class="left">
        </div>
        <div class="right">
        </div>
    </div>
</body>
</html>

好了,效果就不贴了,继续听试讲了



评价