建站教学网,让你建站更便捷和轻松!
您当前的位置:首页 > 网页制作 > html/xhtml

div+css根据内容自适应宽度代码

来源:  时间:2016-05-13 12:48:09
 <!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=gbk" />
<meta name="author" content="Chomo" />
<title>根据内容宽度、高度自适应,垂直水平居中,内容高度超过窗体时,垂直居顶</title>
<style type="text/css">
html { height:100%;}
body { height:100%; text-align:center;}
.centerDiv { 
display:inline-block; 
zoom:1; 
*display:inline;
vertical-align:middle;
text-align:left; 
width:200px; 
padding:10px;
border:1px solid #f60; 
background:#fc0;}
.hiddenDiv { 
height:100%; 
overflow:hidden; 
display:inline-block; 
width:1px; 
margin-left:-1px; 
zoom:1; 
*display:inline;
*margin-top:-1px;
margin-top:0; 
vertical-align:middle; 
background-color: #CC6699;}
</style>
</head>
<body> 
<div class="centerDiv">
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
建站教学网<br/>
</div><div class="hiddenDiv"></div>
<div style=""></div>
</body>
</html>

责任编辑:

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表
CopyRight 2008-2009, JZREAD.COM, Inc. All Rights Reserved
皖ICP备09015033号