Question

我在我的wordpress网站上使用Twitter Bootstrap。问题是我只是将div作为右侧栏并在其上放置了一些图像，这似乎在我的桌面上正常工作但是当我在笔记本电脑上查看它时它会改变它的位置并向下移动。

以下是我的div和图片展示位置代码：

<div style="position:fixed; top:188px; right:0px; border:0px solid #f00; width:25px;"><a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/delhi.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/noida.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/jaipur.jpg" style="margin-bottom:5px;"></a>
<a href="#"><img src="http://pearlacademy.com/wp/wp-content/uploads/2012/10/chennai.jpg" style="margin-bottom:5px;"></a>
</div>

Answer 1

愿这种方法有所帮助，如果我想使用纯粹的CSS，那就是这样的事情：

<强> HTML：

<div class="sidebar">
    <div class="box">Your anchor tags here</div>
</div>

<强> CSS：

html, body {
  height: 100%;
}

div.sidebar {
  position:fixed;
  right: 0px;
  width: 25px;
  height: 100%;
  border: 1px solid blue; /* just for developing, remove this later */
}

div.box {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  border: 1px solid #f00; /* depends on you ;) */
  height: 100px; /* unfortunately you have to set height property :| */
}

实例 here ;）

Div位置不固定在不同的屏幕尺寸

1 个答案: