kennylong
小狐狸
小狐狸
  • UID9061
  • 注册日期2005-10-04
  • 最后登录2006-02-02
  • 发帖数7
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
阅读:4703回复:4

三个div,一个居左,一个居中,中间一个没法居中~~~~~~~~

楼主#
更多 发布于:2005-10-20 06:32
三个div,一个居左,一个居中,中间一个没法居中,请问是怎么回事?

这是css代码:
#title_left {
float: left;
height: 25px;
width: 5px;
background-image: url(../images/title_left.gif);
}
#title_center {
height: 30px;
font-weight: bold;
color: #FFFFFF;
text-align: center;
line-height: 30px;
float: left;
}
#title_right {
float: right;
height: 25px;
width: 5px;
background-image: url(../images/title_right.gif);
}

以下是body中的代码:
<body>
<div id="title_bar">
  <div id="title_left"></div>
  <div id="title_center">居中的标题栏文字</div>
  <div id="title_right"></div>
</div>
</body>
thedawn
小狐狸
小狐狸
  • UID4377
  • 注册日期2005-03-25
  • 最后登录2006-06-26
  • 发帖数22
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
1楼#
发布于:2005-10-20 06:32
因为你设置 #title_center 为浮动, 而又没有指定他的宽度的话, 他就会自动缩为最短, 看起来就在屏幕偏左了.

如果你想做到两边等高的位置各浮动一个 div, 中间的 div 文字居中并且自动伸缩长度, 把 #title_center 的浮动去掉, 并且把 #title_right 放到 #title_center 前面去.
kennylong
小狐狸
小狐狸
  • UID9061
  • 注册日期2005-10-04
  • 最后登录2006-02-02
  • 发帖数7
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
2楼#
发布于:2005-10-20 06:32
感谢楼上的~~~~~~问题已解决,不过感觉div+css还没table+css来得方便。
cnzhouquan
小狐狸
小狐狸
  • UID7516
  • 注册日期2005-07-22
  • 最后登录2005-10-24
  • 发帖数17
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
3楼#
发布于:2005-10-20 06:32
呵呵,怎么可能,div在页面内容定位方面比TABLE强很多。你没有用习惯而已。而且代码量通常要减少一半以上。
ja
ja
小狐狸
小狐狸
  • UID9447
  • 注册日期2005-10-25
  • 最后登录2005-10-26
  • 发帖数4
  • 经验10枚
  • 威望0点
  • 贡献值0点
  • 好评度0点
4楼#
发布于:2005-10-20 06:32
kennylong:感谢楼上的~~~~~~问题已解决,不过感觉div+css还没table+css来得方便。回到原帖


用习惯了就会感觉到div的方便和高效了
游客

返回顶部