<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>
<!doctype html><html>
<head>
<meta charset="UTF-8">
<title>标题</title>
<link rel="stylesheet" href="css/reset.css">
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
.box {
position: relative
width: 500px
height: 300px
margin: 100px 0 0 300px
border: 1px solid #9a9a9a
}
.scol {
position: fixed
right: 0
top: 100px
width: 100px
height: 100px
background: #faa
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="scol">
</div>
</div>
</div>
<script type="text/javascript">
$(window).resize(function() {
// console.log($(window).width())
if ($(window).width() <= 800) {
$('.scol').css({
'position': 'absolute'
})
}
})
</script>
</body>
</html>
其实就是判断浏览器窗口的宽度是不是已经缩小到大div，如何已经缩小到大div了就把小div的定位从相对于浏览器窗口来定位换成绝对定位来弄。如果还不懂可以加我QQ：646488796
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）