网页设计之CSS布局:DIV宽度自适应
发布日期:2012-10-31

  经常布局网页,什么情况都会碰到,比如这多个DIV宽度自适应,也就是做液态布局,具体要用到“负值外补侗法(negative margins)。本示例如果你搞懂,你可以解决大多布局问题,这是总一行三列的布局,中间列分三行,其中中间列的中间行是自适应的,你可以运行看下效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>div + css宽度自适应(液态布局)</title>
<style type="text/css">
<!--
body{margin:0;padding:0px;text-align:center;}
#wrap{margin:0 auto;text-align:left;}
/*左边栏,设定宽度*/
.wrap_l{float:left;background:#FF0000;margin-right:-150px;width:150px;border:1px solid #333;}
/*中间栏,宽度auto http://www.seo371.cn/ */
.wrap_m{width:auto;background:#00FF00;margin:0 140px 0 150px;border:1px solid #000;}
/*右边栏,固定宽度*/
.wrap_r{float:right;background:#0000FF;margin-left:-140px;width:140px;border:1px solid #999;}
.wrap_inner_l{float:left;background:#00FFFF;margin-right:-200px;width:200px;}
.wrap_inner_m{width:auto;background:#FFFF00;margin:0 0 0 200px;}
-->
</style>
</head>
<body>
<div id="wrap">
<div class="wrap_l">
这是左边部分<br />
这是左边部分<br />
这是左边部分
</div>
<div class="wrap_r">
这是右边部分<br />
这是右边部分<br />
这是右边部分
</div>
<div class="wrap_m">
这是中间部分
<div class="wrap_inner_l">中间的左边</div>
<div class="wrap_inner_m">中间的右边</div>
这是中间部分
</div>
</div>
</body>
</html>


上一篇:网页设计之DIV最大宽度和最小宽度解决办法  下一篇:网页设计之网站重构中常见浏览器兼容问题解决方案(IE mozilla FireFox)

  
分享 |