自适应宽度圆角矩形(圆太小了吗?)
先说百分比宽度的布局，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>
<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 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>自适应宽度圆角矩形</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(http://cosa.elianba.com/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<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>
</body>
</html>
<script type="text/javascript">
<!--
$(function(){
var target= $(".circle");
target.css("position","relative");
target.append("<em class=efleft></em><em class=efright></em>");
})
//-->
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; 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(http://cosa.elianba.com/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<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>
</body>
</html>
<script type="text/javascript">
<!--
$(function(){
var target= $(".circle");
target.css("position","relative");
target.append("<em class=efleft></em><em class=efright></em>");
})
//-->
</script>
Over！圆角矩形实现了，可是当浏览器为IE6、宽度为某些值的时候会出现一点误差，如图：
难道是我的圆角图片太小了？要不就是IE6数学学的不好……
秋后总结：ie6下宽度为奇数的时候会有这个bug，暂时没有办法修复
-
« Opera、firefox添加收藏的方法
|
吊牌»
- 2008-9-13 22:17
- 艺术pk技术