两列自适应布局——左侧宽度固定，右侧宽度自适应

最新推荐文章于 2024-02-08 10:14:31 发布

Dz329

最新推荐文章于 2024-02-08 10:14:31 发布

阅读量211

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_44017778/article/details/116605987

版权

原理：

1）左右两个盒子，左侧盒子宽度固定，右侧盒子宽度为100%

- 2）为左侧设置绝对定位position: absolute;

- 3）在右侧盒子中添加子盒，为子盒设置padding-left属性，值为左侧盒子宽度

代码：

<style>
        .left {
            width: 300px;
            min-height: 100px;
            background-color: green;
            position: absolute;
        }

        .right {
            width: 100%;
            min-height: 100px;
            background-color: red;
        }

        .content {
            padding-left: 300px;
            
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="left"></div>
        <div class="right">
            <div class="content">
                
            </div>
        </div>
    </div>

</body>

结果：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Dz329

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两列自适应布局——左侧宽度固定，右侧宽度自适应

原理：1）左右两个盒子，左侧盒子宽度固定，右侧盒子宽度为100%-2）为左侧设置绝对定位position:absolute;-3）在右侧盒子中添加子盒，为子盒设置padding-left属性，值为左侧盒子宽度代码：<style> .left { width: 300px; min-height: 100px; background-color: green; ...
复制链接

扫一扫