您的位置：首页 > 编程语言

固定浮动定位(fixed)实现思路及代码

2013-03-20 14:37 399 查看

网页中如下图，需要在页面底部中间固定一个块，当然用positon:fixed来控制，然后bottom:0px;能让其在底部，但是在中间怎么处理呢？

最先想到的是用js或者jquery算屏幕的宽度A，然后减去红色框的宽度B，那么它的left值为(A-B)/2 px;
其实有更简单的，只需要css来控制，代码如下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style> 
.test 
{ 
border:1px solid red; 
position:fixed; 
bottom:0px; 
bottom:0px; 
left:0px; 
right:0px; 
margin:auto auto; 
height:50px; 
width:200px; 
} 
</style> 
</head> 
<body> 
<div class="test"></div> 
</body> 
</html>

重要之处就是left:0px;right:0px;margin:auto auto;
经测试在ie8、9、10，chrom、firefox中均正常

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航