<!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>
左右宽度固定,中间自适应
最新推荐文章于 2022-05-17 16:36:47 发布