飘零雾雨的专栏

欢迎到我的主博客：css探索之旅(http://blog.doyoe.com/)

用户操作

[留言] [发消息] [加为好友]

订阅我的博客

[编辑]storm0的公告

<div style="background-color:#eee;padding:8px 15px;overflow:hidden;"> <img alt="近照" title="近照" src="http://blog.doyoe.com/Plugins/aboutMe/Myface.jpg" style="vertical-align:middle;width:140px;height:220px" /> </div> <div style="padding:10px;line-height:180%;text-align:left;"><strong>昵称：</strong><a href="http://www.doyoe.com/">飘零雾雨(Doyoe)</a><br /><strong>位置：</strong>中国，深圳</div>

[编辑]文章分类

[编辑]飘零雾雨的相关链接

css探索之旅

飘雨社区

存档

无限制的自由适应的边框收藏

　　前几天改一个东东时，看到一个不错的效果，可惜它是用JS做的，有点复杂和麻烦。今天正好没什么事，就整了个用CSS实现的方法，感觉应该会比较实用的。

　　效果描述：一个容器，有外在表现的一种容器，这个容器要根据自身包含的内容（比如说图片）大小来改变自己的宽高。

　　{这个框框是借用别人滴，我美工比较差而且人很懒滴说，只是自己切了下图}

　　一路做来都非常顺利，顺便考虑了下图片请求的问题，合并了几张图片，其实还可以更优化的，不过暂时就这样，该例仅做说明，实际应用时再Update。

　　不过做到最后成型的时候，却出了一点小小的问题，IE下居然不能自适应宽，搞了半天，才发现是个疏漏造成滴，呵呵，虚惊一场。

　　掰了这么多，看效果先（可以烤到本地测试更换内容）：

　　［效果演示：http://www.doyoe.com/model/xhtmlcss/style/autoframe/1.htm］

CSS部分：

#main {
float:left;
}
img {
vertical-align:middle;
}
.dytop {
background:url(skin/top.gif) 21px top repeat-x;
}
.dyr_t {
background:url(skin/jiao.gif) right -42px no-repeat;
line-height:21px;
}
.dyl_t {
background-position:left top;
}
.dyr_b {
background-position:right -63px;
}
.dyl_b {
background-position:left -21px;
}
.dybot {
background:url(skin/bottom.gif) 21px bottom repeat-x;
}
.dyleft {
background:url(skin/left.gif) left top repeat-y;
}
.dyright {
background:url(skin/right.gif) right top repeat-y;
padding:0 21px;
}

XHTML部分：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="Author" content="Doyoe(飘零雾雨), edzmaster@gmail.com" />
<title>无限制的自由适应的边框 - 转载请注明出处</title>
</head>
<body>
<h3>无限制的自适应宽高的框框：</h3>
<div id="main" class="dytop"><div class="dybot">
<div class="dyr_t"><div class="dyl_t dyr_t"> </div></div>
<div class="dyleft"><div class="dyright"><img src="images/3.jpg" alt="作者" title="作者" /></div></div>
<div class="dyr_b dyr_t"><div class="dyl_b dyr_t"> </div></div>
</div></div>
</body>
</html>