时间:2021-05-08
网页中如下图,需要在页面底部中间固定一个块,当然用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中均正常
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
position:fixed;这个属性用起来确实很方便,可以轻松的实现固定位置的浮动层效果。但是,它不支持IE6及以下版本。于是很多同学使用JS模拟。今天写了一
positon:fixed让HTML元素脱离文档流固定在浏览器的某个位置网页中经常会有浮动的导航条会用到这种定位模式,但是ie6下并不兼容这种定位浮动导航条的样
问题描述想用CSS实现顶部固定的效果:尝试margin-top加position:fixed实现,代码如下:Test.header{position:fixed
本文实例讲述了javascript实现的固定位置悬浮窗口。分享给大家供大家参考。具体实现方法如下:Fixed固定位置的悬浮*{font-size:12px;fo
一,流体浮动布局描述:当视图变化时,跟着变化,设置百分比大小,采用浮动来实现二,流体定位布局描述:当视图变化时,跟着变化,设置百分比大小,用定位方式实现三,固定