DIV+CSS布局问题
页面上有一个大的div,这个大的div里面有3个小的div,第一个div左对齐,第三个div右对齐,第二个(也就是中间的)div居中对齐,这个怎么来实现啊?左边div和右边div的宽度和高度都是固定的,关键是的中间那个div,宽度不固定。
前提条件是:大的div宽度不固定width:100%;
也就是下面这张图片,左边的返回图片左对齐,右边的3个点右对齐,中间的那“积分中心”居中对齐,用3个div来实现,左右2个div宽度都固定的,分别是左右悬浮的,中间那个div怎么办?怎么居中?
[解决办法]
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.div1{width:100%;line-height:50px;background:#FFC}
.left{float:left;width:100px;background:#9C6}
.right{float:right;width:100px;background:#0CF}
.center{text-align:center;}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div class="div1">
<div class="left">左侧</div>
<div class="right">右侧</div>
<div class="center">积分中心</div>
</div>
</body>
</html>
<style type="text/css">
*{margin:0;padding:0}
.box{position:relative;height:50px;background:#fafafa}
.center{text-align:center;height:50px;line-height:50px}
.left,.right{position:absolute;background:#f00;width:50px;height:30px;top:10px}
.left{left:0}
.right{right:0}
</style>
<div class="box">
<div class="left">左</div>
<div class="center">中</div>
<div class="right">右</div>
</div>
<style type="text/css">
*{margin:0;padding:0}
.box{position:relative;height:50px;background:#fafafa}
.center{text-align:center;height:50px;line-height:50px;background:yellow;padding:0 70px;}
.left,.right{position:absolute;background:#f00;width:50px;height:30px;top:10px}
.left{left:0}
.right{right:0}
</style>