左右宽度固定，中间自适应

最新推荐文章于 2022-05-17 16:36:47 发布

fedawn

最新推荐文章于 2022-05-17 16:36:47 发布

阅读量592

点赞数

分类专栏：笔记 css 文章标签： class float div

本文链接：https://blog.csdn.net/fedawn/article/details/7280547

版权

笔记同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>左右宽度固定，中间自适应</title>
<style type="text/css">
	*{ margin:0; padding:0;}
	body{ font-size:12px; background:#F3F3F3;}
	.wraper{ width:400px; height:200px; overflow:hidden; margin:200px auto; background:#FFF;}
	.wraper .side{ float:left; width:100px; height:180px; background:#006AD5; padding:10px; color:#fff;}
	.wraper .container{ padding:0 0 0 130px; height:200px; width:auto; _padding-left:0;}
	.wraper .main{ height:200px; padding-right:70px; _padding-right:0px;}
	.wraper .sidebar{ float:right; width:40px; height:180px; background:#006AD5; padding:10px; color:#fff;}
	.wraper .content{ padding-top:10px;}
</style>
</head>

<body>
<div class="wraper">
	<div class="side">左侧</div>
  <div class="container">
  	<div class="sidebar">右侧</div> <!-- 注意sidebar与main顺序 -->
		<div class="main">
    	<div class="content">走过的时光就像一本书，每一步路途 都写着感悟，来不及回顾细细阅读，下一章就催促我上路。</div>
    </div>
  </div>
</div>
</body>
</html>

fedawn

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
左右宽度固定，中间自适应

左右宽度固定，中间自适应 *{ margin:0; padding:0;} body{ font-size:12px; background:#F3F3F3;} .wraper{ width:400px; height:200px; overflow:hidden; margin:200px auto; background:#FFF;} .wraper .side{ float:lef
复制链接

扫一扫

专栏目录