首页 > html总结 > div+css,左侧宽度固定,右侧自适应

div+css,左侧宽度固定,右侧自适应

2015年7月2日 发表评论 阅读评论

实现了左侧div宽度固定,右侧根据左侧宽度自适应屏幕宽度的功能,代码如下:

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>左侧div宽度固定,右侧根据左侧宽度自适应屏幕宽度</title>
<style type=”text/css”>
* {font-size:12px;margin:0px;padding:0px;}
a {text-decoration:none;color:#000;}
a img {border:none;}
.cl {clear:both;}
div.boxall {position:relative;padding-left:180px;}
div.left {width:180px;margin-left:-180px;float:left;height:300px;background:blue;}
div.right {width:100%;float:left;height:300px;background:red;}
</style>
</head>

<body>
<div class=”boxall”>
<div class=”left”>
左侧内容,左侧固定宽度
</div>
<div class=”right”>
右侧内容,右侧根据左侧宽度自适应屏幕宽度
</div>
</div>
</body>
</html>

分类: html总结 标签: , , ,
  1. 本文目前尚无任何评论.
您必须在 登录 后才能发布评论.
css.php