0

alite ので、このサイトのチュートリアルを使用しました: http://www.webreference.com/programming/css_gallery/index.html

問題は、さらに画像を追加すると、右側のギャラリーが div マージンからはみ出してしまうことです。これを修正するために、overflow:auto を使用しました。さらに多くの画像がある場合は、div を下にスクロールできます。問題は、ホバーがdivの上部に配置されたときに表示される画像です。そのため、下にスクロールしすぎると、画像が上から切り取られるか、まったく表示されません。このページのようなものです。このページを十分に下にスクロールすると、上にスクロールしない限り、この投稿が表示されなくなります。これを修正するために使用できる CSS コードはありますか。基本的に私はそれを位置にしたい：ホバーのものでdivボックスの固定効果。チュートリアルコードを編集してそれを行うにはどうすればよいですか？

4

1 に答える 1

0

問題はチュートリアルのステップ 9 にあります

#container li { 
        float:left; 
 }

float について知っておくべき重要な概念はclearプロパティです。画像のスペースが含まれている div のスペースを超えるため、画像は実質的に div から外れます。この問題を解決するには、いくつかの方法があります。詳しくはこちらをお読みください http://css-tricks.com/all-about-floats/

1.overflow: auto;すでに実装しているように

2.クラスを定義する

.clear {
      clear:both;
}

コンテナの終了タグの直前に <div class="clear"> を置きます

3.疑似セレクターを使用する:after

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

<div id="container"> ... を <div id="container" class="clearfix"> に変更します

個人的には、マークアップがすっきりするので、方法 3 を好みます。方法 3 のブラウザの互換性に注意してください。

于 2012-07-04T08:53:05.310 に答える