首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > CSS >

DIV+CSS布局有关问题

2014-01-17 
DIV+CSS布局问题页面上有一个大的div,这个大的div里面有3个小的div,第一个div左对齐,第三个div右对齐,第二

DIV+CSS布局问题

  页面上有一个大的div,这个大的div里面有3个小的div,第一个div左对齐,第三个div右对齐,第二个(也就是中间的)div居中对齐,这个怎么来实现啊?左边div和右边div的宽度和高度都是固定的,关键是的中间那个div,宽度不固定。
前提条件是:大的div宽度不固定width:100%;

也就是下面这张图片,左边的返回图片左对齐,右边的3个点右对齐,中间的那“积分中心”居中对齐,用3个div来实现,左右2个div宽度都固定的,分别是左右悬浮的,中间那个div怎么办?怎么居中?
DIV+CSS布局有关问题

[解决办法]

<!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>


[解决办法]
引用:

你这个center最好加padding:0 60px;
要不然你center的内容会被左右的给遮住了
<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>

热点排行