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

Question

我正在尝试创建两个位于divs的{​​{1}}并设置fixed和left值

bottom

我希望thess divs排在中心

<div id='div1'>test1</div>
<div id='div2'>test2</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;
}