实现左边固定宽度右边自适应布局

最新推荐文章于 2023-08-13 09:34:53 发布

原创最新推荐文章于 2023-08-13 09:34:53 发布 · 457 阅读

0 ·

CC 4.0 BY-SA版权

PC端专栏收录该内容

30 篇文章

订阅专栏

本文介绍了四种使用CSS实现左边固定宽度、右边自适应布局的方法，包括设置margin-left、绝对定位、浮动以及使用calc()函数计算宽度。通过示例代码详细解析了每种方法的实现细节，适用于网页布局设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种

#box{width: 100%;background: red;overflow:hidden;}
#lef{float:left;width: 300px;height: 300px;background: blue;}

#rig{margin-left: 310px;background: pink;height: 500px;}

第二种
#box{width: 100%;background: red;overflow:hidden;position: relative;}
#lef{position:absolute;top: 0;left: 0; width: 300px;height: 300px;background: blue;}
#rig{margin-left: 310px;background: pink;height: 500px;}

第三种
#box{width: 100%;background: red;overflow:hidden;}
#lef{float:left;width: 300px;height: 300px;background: blue;}
#rig{overflow: hidden; background: pink;height: 500px;}

第四种 calc()能让你给元素的做计算。
#box{width: 100%;background: red;overflow:hidden;}
#lef{width: 300px;float: left; height: 300px;background: blue;}
#rig{float: left;width: calc(100% - 300px);height:400px;background: pink;}

使用div标签