css,我用fixed定位一个div,可用笔记本看他就往左偏移了,怎么办啊?

html-css011

css,我用fixed定位一个div,可用笔记本看他就往左偏移了,怎么办啊?,第1张

你是想把div紧贴中间区域吧,然后你再你的22寸显示器上设置了一个固定的right,而fixed是距离浏览器边缘的,你要是把你的22寸的浏览器改下窗口大小,一样会出问题,你需要做的是用js计算出距离浏览器边缘的距离,然后用js设置left或者right值,当浏览器触发resize方法的时候重新计算

直接设置下float的样式为左“漂移”就可以,之后即可根据窗口大小自动适应的。

<body >

<div class="one" style="float:leftwidth:40pxheight:50%">内容1</div>

<div class="two" style="float:leftwidth:40pxheight:50%">内容2</div>

</body >

CSS是能实现的,不过有点麻烦。大概是这么实现:

在HTML中为需要“向右偏移15%+22px”的div加上两个辅助定位的div:

<div id="outer">

    <div id="theMiddel">

        <div id="div"></div>   <!-- 目的:此div向偏移15%+22px -->

    </div>

</div>

2. 在CSS中,首先使最外层的<div id="outer">使用相对定位position:relative,占据15%的父元素的宽度(即width: 15%),高度与目标<div id="div">一样;

3. 在CSS中,使以下两个div

<div id="theMiddel">

    <div id="div"></div>   <!-- 目的:此div向偏移15%+22px -->

</div>

假设目标<div id="div">的宽度是50px。

<div id="theMiddel">使用绝对定位,定位到最上边最右边,这时候目标<div id="div">的位置就是:向右偏移15%减去目标<div id="div">的宽度(15% - 50xp)。

4. 目标<div id="div">使用绝对定位,然后right: -(50 + 22)px。这就是向右偏移15%+22px。

以下代码详细实现

向右偏移15%+22px.html  文件代码清单如下:

<!doctype html>

<html langj="zh">

  <head>

    <meta charset="utf-8">

    <title>向右偏移15%+22px</title>

    <link rel="stylesheet" href="marginRight.css">

  </head>

  <body>

    <p>CSS绝对定位:向右偏移15%+22px</p>

    

    <div id="outer">

      <div id="theMiddel">

        <div id="div"></div>

      </div>

    </div>

  </body>

</html>

marginRight.css   文件代码清单如下:

#outer {

position: relative

width: 15%              /* 用宽度15%定位到15%位置 */

height: 50px            /* 这行可以去掉,现在是为了看清偏移情况 */

background: rgb(220, 220, 220)/* 这行可以去掉,现在是为了看清偏移情况 */

}

#theMiddel {               /* 中间部分使目标div移动到15%位置的最右边 */

position: absolute

top: 0

right: 0

}

#div {

position: absolute

right: -72px       

/* 偏移量是:目标div的宽度加上22px。如果目标div宽度变化,这行自己相应变化 */

width: 50px     

/* 目标div的宽度,自己设定,如果变化,上一行的负偏移量也要改变 */

height: 50px

background: rgb(18, 48, 168)

}