<div class="text clearfix" style="text-align:center">
2.<span style="float:right">居右</span><span style="float:left">居左</span>居中
</div>
<table width="" border="0" cellpadding="0" cellspacing="1" bgcolor="#CCCCCC">
<tr>
<td bgcolor="#FFFFFF" align="left">居左</td>
<td bgcolor="#FFFFFF" align="center">居中</td>
<td bgcolor="#FFFFFF" align="right">居右</td>
</tr>
</table>
div+css是Web设计标准,它是一种网页的布局方法。与传统中通过表格(Table)布局定位的方式不同,它可以实现网页页面内容与表现相分离。
下面分别对div居左、居右、居中做下代码演示:
div css布局之div左对齐,div+css布局完整代码:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>div对齐实例 在线演示 DIVCSS5</title>
<style>
.divcss5-left{float:leftwidth:250pxheight:50pxborder:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-left">此DIV靠左对齐显示</div>
</body>
</html>
div css布局之div右对齐,div+css布局完整代码:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>div对齐实例 在线演示 DIVCSS5</title>
<style>
.divcss5-right{float:leftwidth:250pxheight:50pxborder:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-right">此DIV靠右对齐显示</div>
</body>
</html>
div css布局之div居中对齐,DIV+CSS布局完整代码:
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>div对齐实例 在线演示 DIVCSS5</title>
<style>
.divcss5-cent{margin:0 autowidth:250pxheight:50pxborder:1px solid #F00}
</style>
</head>
<body>
<div class="divcss5-cent">此DIV居中右对齐显示</div>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)