css实现div两列布局——左侧宽度固定，右侧宽度自适应（两种方法）

最新推荐文章于 2025-04-12 20:48:30 发布

置顶 LonlySnow

最新推荐文章于 2025-04-12 20:48:30 发布

阅读量2.4w

点赞数 16

分类专栏：前端基础文章标签： css html 自适应布局 absolute

本文链接：https://blog.youkuaiyun.com/piaoyinluo2316/article/details/89096255

版权

前端基础专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种网页布局技巧，通过固定宽度的侧边栏和自适应宽度的内容区实现响应式设计。利用CSS的浮动和margin属性，文章详细解释了实现步骤，并扩展讨论了左中右三栏布局的解决方案。

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

1.应用场景

左侧一个导航栏宽度固定，右侧内容根据用户浏览器窗口宽度进行自适应

2.思路

首先把这个问题分步解决，需要攻克以下两点：

1）让两个div并排到一行

2）让一个div宽度固定，另个div占据剩下宽度的空间

关于第一点，首先要明确，div属于块级元素，在文档标准流中单独占据一行。要想多个div在一行，就可以想办法让div脱离标准流，比如使用float或者absolute；

关于第二点，首先有一个宽度固定的div，另外自适应的div宽度是多少？首先这个宽度不能写“100%”，因为这里的100%是相对于第一个非静态祖先元素的，也就是说如果这样写，页面会出现整个页面宽度+左边固定列宽度的情形。那么对自适应宽度的div处理方法是不去设置它的width属性，浏览器会自动计算后让它占一行，接下来给他设置margin-left属性把左侧固定列空间空出即可。

3.实现

1）html

<!DOCTYPE html>
<html>
<head>	
	<link rel="stylesheet" type="text/css" href="task001.css">
	<meta charset="utf-8">
</head>
<body>	
		<!-- 左侧固定列 -->
		<div class="fixedColumn"></div>
		<!-- 右侧自适应宽度列 -->
		<div class="flexibleColumn"></div>	
</body>
</html>

2）css

/*左固定列*/
.fixedColumn{
	width: 40px;
	height: 100%;
	background-color: red;
	float: left;
	/*position: absolute;
	left: 0;*/
}
/*右自适应列*/
.flexibleColumn{
	height: 100%;
	background-color: blue;	
	margin-left: 40px;
}

注：

1）fixedColumn 里注释的方法即绝对定位的实现方式，取消注释后把float那句注释掉，可以实现相同的效果

2）使用float需要注意清除浮动造成父元素塌陷的问题（这里不用清除，因为自适应列和固定列一样高，在标准流中可以撑起父元素）

4.扩展

如果把上面的问题稍微改变一下，要求展示一个左中右布局，而且左右固定，中间自适应，这要如何实现呢？

估计很多人会这样想：

css中.flexibleColumn样式添加一个属性：margin-right: 40px;

html中再追加一个固定列，在右侧浮动：

然后运行的效果是...左中布局，右边空白，浏览器出现滚动条，右固定列换行后右浮动了。

然后我们做一个小小的改动——把刚才添加的右浮动固定列的dom放到自适应列前面，也就是说html的dom顺序是左浮动，右浮动，自适应的顺序！html如下：

	<!-- 左侧固定列 -->
	<div class="fixedColumn"></div>
	<!-- 右侧固定列 -->	
	<div class="fixedColumn" style="float: right;"></div>
	<!-- 中间自适应宽度列 -->
	<div class="flexibleColumn"></div>

效果就“神奇”的实现了~

这里一个注意点就是：浮动元素在dom中要在非浮动元素的前面，否则非浮动元素后面的浮动元素会换行。

具体原理待研究..网上好像没查到，有谁知道的话希望告知~