CSS2.0下1行2列，左侧固定右侧自适应布局，兼容所有浏览器。[学习笔记]

芝芝小笼包

于 2016-05-15 18:25:10 发布

阅读量561

点赞数

CC 4.0 BY-SA版权

分类专栏：前端笔记

本文链接：https://blog.youkuaiyun.com/sh0109/article/details/51418200

前端笔记专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种网页布局技巧，通过简单的HTML和CSS实现左侧固定宽度右侧自适应的两栏布局。该方法适用于需要固定宽度侧边栏而主体内容自适应变化的场景。

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

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>1行2列-左固右自适应</title>
  <style type="text/css">
    body,div{margin:0;padding:0;}
    #content{overflow:hidden;float:left;background:#ccc;}
    #box{width:100%;height:600px;background:#ffc;float:left;}
      #right{height:600px;background:#00f;margin-left:300px;}
    #left{height:600px;width:300px;background:#0f0;margin-left:-100%;}
  </style>
</head>
<body>
	<div id="content">
		<div id="box">
			<div id="right"></div>
		</div>
		<div id="left"></div>
	</div>
</body>
</html>
```
备注：想让哪栏自适应，即将该列放到其他元素前面，同时外面要套个盒子，并且宽度100%