两列定宽布局的多种实现方式

最新推荐文章于 2024-09-10 21:09:20 发布

原创最新推荐文章于 2024-09-10 21:09:20 发布 · 335 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

1 篇文章

订阅专栏

本文介绍三种实现网页布局中左侧列固定宽度，右侧列自适应宽度的方法。包括使用浮动float加溢出隐藏overflow:hidden，定位position:absolute加外边距margin，以及浮动float加CSS3 calc函数。这些技巧适用于前端开发人员，帮助他们更灵活地创建响应式布局。

左侧列定宽，主体列自适应宽度自适应
基础代码部分：

<body>
		<div class="div1">左侧列</div>
		<div class="div2">主题列</div>
</body>

第一种方式：
用浮动float + 溢出隐藏 overflow: hidden

<style>
		.div1{
			   width: 200px;
			   height: 200px;
		       background-color: #fade45;
			   float: left;
		}
		.div2{
		     height:200px;
		     overflow: hidden;
		     background-color: #f00;
		}
</style>

第二种方式：
用定位position: absolute + 外边距margin

<style>
		.div1{
			  width: 200px;
			  height: 200px;
			  position: absolute;
			  background-color: #fade45;
		}
		.div2{
			  height:200px;
			  margin-left: 200px;
			  background-color: #f00;
		}
</style>

第三种方式：
用浮动float + CSS 3中的calc函数（此函数用于动态计算长度值）

<style>
			.div1{
				width: 200px;
				height: 200px;
				background-color: #f00;
				float: left;
			}
			.div2{
				width: calc(100% - 200px) ;
				background-color: #0f0;
				height: 300px;
				float: left;
			}
</style>