0

WordPressサイトにTwitterBootstrapを使用しています。問題は、右側のサイドバーとして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 に答える