先说百分比宽度的布局，id为container的div宽度自适应，里面分左右2个部分宽度<=50%(有1px的边框)。代码如下：
<div id="container"> <div class="fleft circle"> <h3>标题</h3> <div>content<br />content<br />content<br />content<br />content<br />content<br />content<br /></div> </div> <div class="fright circle"> <h3>标题</h3> <div>content<br />content<br />content<br />content<br />content<br />content<br />content<br /></div> </div> </div>
分别给左右2个div设置1px边框肯定是行不通的（宽度会溢出），应该这样写：
h3, .circle div {margin:1px;}
然后在加上圆角，完整代码（需刷新）：
<!DOCTYPE html>
<html>
<head>
<meta charset="gb2312" />
<title>自适应宽度圆角矩形</title>
<script type="text/javascript" src="http://cosa.elianba.com/cosa/jquery.js"></script>
<style type="text/css">
body {font:12px "宋体"}
.fleft{float:left;}
.fright{float:right;}
h3, .circle div {margin:1px;}
h3 {padding:0;height:23px;line-height:23px;text-indent:12px;font-size:12px;background:#D1DDF3;}
#container {margin:0 auto;padding:30px 0 0 0;width:548px;height:600px;background:yellow;}
.circle {width:49%;background:#619CD6;}
.circle em {position:absolute;top:0;width:4px;height:4px;
background:url(../attachment/200809/1221286561_9262cc35.png) no-repeat 0 0;overflow:hidden;
}
.circle em.efleft {left:0;}
.circle em.efright {right:0;background-position:-4px 0;}
.circle div {background:width:100%;hight:100;background:#FFFFFF;}
</style>
</head>
<body>
<div id="container">
<div class="fleft circle">
<h3>标题</h3>
<div>content<br />content</div>
</div>
<div class="fright circle">
<h3>标题</h3>
<div>content<br />content</div>
</div>
</div>
<script type="text/javascript">
$(function(){
var target= $(".circle");
target.css("position","relative");
target.append("<em class=efleft></em><em class=efright></em>");
})
</script>
</body>
</html>
Over！圆角矩形实现了，可是当浏览器为IE6、宽度为某些值的时候会出现一点误差，如图：
难道是我的圆角图片太小了？要不就是IE6数学学的不好……
秋后总结：ie6下宽度为奇数的时候会有这个bug，暂时没有办法修复
« 上一篇：Opera、firefox添加收藏的方法
吊牌：下一篇 »
