1. 使DIV大小正好包含内容
<!DOCTYPE html>
<html>
<head>
<style>
.fitContent {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
</style>
<script>
function addDiv() {
var div = document.createElement('div');
div.appendChild(document.createTextNode("Dynamic node"));
div.style.border="1px solid green";
div.className="fitContent"
document.body.appendChild(div);
}
</script>
</head>
<body onload = "addDiv();">
<div style="border:1px solid red;" class="fitContent">
I should be in div's center
</div>
</body>
</html>
未使用fitContent样式时,两个div的显示在IE和FireFox上面都一样,如下:
使用了fitContent样式之后,两个div的显示在IE和FireFox上面都一样,如下:
2. 使DIV内容自动充满DIV
<!DOCTYPE html>
<html>
<head>
<style>
.autoFitContainer {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
</style>
</head>
<body onload = "addDiv();">
<div style="position: absolute; border:2px solid red; width:100px; height:100px;">
<span style="background-color:yellow;" class="autoFitContainer">Auto Fit Container</span>
</div>
</body>
</html>
未使用autoFitContainer样式时,两个div的显示在IE和FireFox上面都一样,如下:
使用了autoFitContainer样式之后,两个div的显示在IE和FireFox上面都一样,如下:
3. 在表格的单元格的任意位置中添加子元素
<html>
<head>
</head>
<body>
<div style="position:relative;width:200px;background:#dccbbe;border:1px solid black;">
<table border="1" align="center" cellpadding="0" cellspacing="2" bgcolor="white">
<tr>
<td align="center">Test1</td>
<td >
<div style="position:relative;height:50px;width:70px;background:yellow;">
<span style="position:absolute;top:0;left:0;background:red;">Test4</span>
</div>
</td>
</tr>
<tr>
<td>
<div style="position:relative;height:50px;width:50px;text-align:center;line-height:50px;background:purple;">
<span style="background:magenta;">Test2</span>
</div>
</td>
<td>
<div style="position:relative;height:50px;width:70px;background:green;">
<div style="position:absolute;bottom:0;right:0;background:lime;">Test5</div>
</div>
</td>
</tr>
<tr>
<td>
<div style="position:relative;height:70px;width:50px;text-align:center;line-height:70px;background:maroon;">
<span style="background:pink;">Test3</span>
</div>
</td>
<td>
<div style="position:relative;height:50px;width:70px;background:blue;">
<span style="position:absolute;top:15px;right:0;background:aqua;">Test6</span>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
运行效果如下:
- 大小: 2.8 KB
- 大小: 2.2 KB
- 大小: 1.2 KB
- 大小: 1.2 KB
- 大小: 4.3 KB
分享到:
相关推荐
初学者的用的静态页面实例,HTML+CSS实现简单页面,代码和效果图都有
学习web前端开发中搜集的一些,js、jquery、css实现的web脚本。在需要的时候可以找找借鉴借鉴。
该资源是一个WEB页面正在加载实例,非常的酷,非常的实用,可以让你的WEB UI增加不少光彩,让你WEB UI更加友好.快来下载吧!不下载将是你的损失.
web项目实例,在课堂笔记中有对应的教程,这里是代码
web系统开发实例
Java Web开发实例大全(提高卷)筛选、汇集了Java Web开发从基础知识到高级应用各个层面的大量实例及源代码,共有600个左右,每个实例及源代码按实例说明、关键技术、设计过程、详尽注释、秘笈心法的顺序进行了分析...
Web流布局实例
响应式页面
spring webflow 实例spring webflow 实例spring webflow 实例spring webflow 实例spring webflow 实例spring webflow 实例
一个简单的web服务应用实例,适合让初学者看看。大家支持下啊!没什么好资源,以后有了好的就会跟大家分享,另外也想大家给个基于webservice的图书馆管理系统的实现的例子,有的朋友请给下:876767716@qq.com,后有...
在网页上实现ping命令,可以扩展到Tracert命令 在网页上实现ping命令,可以扩展到Tracert命令
web页面设计原则与实例.pdf
java web 学习简单实例
Jmeter WEB HTTP压力测试实例 最新版本2.10
Web客户端技术 实例 专业的Web客户端技术 实例 很用用的
包含jCharts web报表开发完成实例
net webApi 实例,通过后台get和post方式提交数据
Java网络编程 JAVA web开发实例讲解 宠物分类展现web项目 第05章 宠物分类展现模块的第一个动态版本实现(共31页).ppt Java网络编程 JAVA web开发实例讲解 宠物分类展现web项目 第06章 用JavaBean、EL和JSTL优化...
web页面js屏蔽地区代码实例,主要用于防止某个地区访问该web页面
JSP 的WEB开发实例 投票系统,新闻发布系统,上传下载系统 等等 有数据库的脚本