2

トップバーがあり、リンクはfloatを使用して設定されています。リンクの1つに、float divがあります。そのdivに、絶対位置の画像を表示したいです。完全な画像を表示したくないので、absoluteを使用しています。その一部のみが表示されます。これは、上と左を次のように使用することで実現されます。

CSS

div.cont{
    max-width:50px;
    min-width:50px;
    height:50px;
    overflow:hidden;
}
img{
    position:absolute;
    width:100px;
    height:100px;
    top:-10px;
    left:-15px;
}

HTML

<div style="float:right;">
    <div class="cont">
        <img src="image url"/>
   </div>
</div>

ただし、画像は絶対位置にあるため、そのdivの外側に表示されます。

どうすればこれを克服し、画像をdivで表示できますか？

前もって感謝します。

4

3 に答える 3

7

親divの位置を設定します。

div.cont{
      max-width:50px;
      min-width:50px;
      height:50px;
      overflow:hidden;
      position:relative;
}

何かを絶対に配置すると、次に配置された祖先を基準にして配置されます。位置を指定しない場合、祖先が本体になります。

于 2013-02-13T16:34:14.270 に答える
4

デフォルトでは、絶対配置要素はビューポートに対して相対的に配置されます。position: relativeフローティング divに追加します。これにより、ビューポートに対してではなく、親に対して相対的に画像が内側に配置されます。

于 2013-02-13T16:34:29.903 に答える
0

imgでandtop：`の代わりにmargin-topandを使用します。margin-leftleft:

于 2013-02-13T16:34:22.393 に答える