【CSS】右边宽度固定，左边自适应

最新推荐文章于 2022-07-26 10:33:18 发布

LuviaWu

最新推荐文章于 2022-07-26 10:33:18 发布

阅读量666

点赞数

分类专栏：工作笔记文章标签： css

本文链接：https://blog.csdn.net/LuviaWu/article/details/83862090

版权

工作笔记专栏收录该内容

47 篇文章 2 订阅

订阅专栏

右边宽度固定，左边自适应

第一种：用flex

<style>
body{
    display: flex;
}
.left{
    background-color: rebeccapurple;
    height: 200px;
    flex: 1;
}
.right{
    background-color: red;
    height: 200px;
    width: 100px;
}
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

第二种：用margin-right

<style>
    div {
        height: 200px;
    }
    .left {
        float: right;
        width: 200px;
        background-color: rebeccapurple;
    }
    .right {
        margin-right: 200px;
        background-color: red;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

当然还有第三种的, 就是使用定位

<style>
    div {
        height: 200px;
        width:100%;
        position: relative;
    }
    .left {
        width: 200px;
        background-color: rebeccapurple;
        position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
    }
    .right {
        width:100%;
        padding-left: 200px;
        background-color: red;
        position: absolute;
	left: 0;
	top: 0;
	z-index: 1;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

LuviaWu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【CSS】右边宽度固定，左边自适应

右边宽度固定，左边自适应第一种：&amp;amp;lt;style&amp;amp;gt;body{ display: flex;}.left{ background-color: rebeccapurple; height: 200px; flex: 1;}.right{ background-color: red; height: 200px; width...
复制链接

扫一扫