0

我正在为我的 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>
4

1 回答 1

0

愿这种方法有所帮助，如果我想使用纯 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 :| */
}

这里有一个活生生的例子；）

于 2012-10-29T13:16:45.467 回答