html - 如何保持 2 个固定 div 的位置相同？

Question

我正在尝试创建两个divs定位为fixed并设置left和bottom值

<div id='div1'>test1</div>
<div id='div2'>test2</div>

我希望这些 div 排列在中心

_________________________________________



              ____    ____
             |____|  |____|

_________________________________________

我的CSS如下

div#div1{
    position: fixed;
    display: block;
    bottom: 48px;
    left: 35%;
    width: 200px;
    height: 300px;
    background-color:grey;
    background-repeat: repeat-x;
    text-align: center;
    z-index: 500;
}
div#div2{
    position: fixed;
    display: block;
    bottom: 48px;
    left: 55%;
    width: 200px;
    height: 300px;
    background-color:grey;
    background-repeat: repeat-x;
    text-align: center;
    z-index: 500;
}

我还需要这些fixed位置，因为即使用户滚动，我也希望它们保持在同一个位置。

left我的问题是，div如果我更改浏览器宽度或更改为不同的屏幕，我无法保持相同的距离。

所以它可能就像

___________________________________


        ____      ____
       |____|    |____|

___________________________________

如果我有一个较小的屏幕。

谁能帮我解决这个问题？非常感谢！

Answer 1

你可以试试这个：

<div class="wrapper">
  <div id="div1"></div>
  <div id="div2"></div>
</div>

和CSS：

 .wrapper{
  margin:0 auto;
  position:fixed;
  left:50%;
  margin-left:-250px;
  bottom:48px;
  width:500px;
}


div#div1{
 float:left;
 display: block;
 width: 200px;
 height: 300px;
 background-color:grey;
 background-repeat: repeat-x;
 text-align: center;
 z-index: 500;
}

div#div2{
 float:right;
 width: 200px;
 height: 300px;
 background-color:grey;
 background-repeat: repeat-x;
 text-align: center;
 z-index: 500;
}