Question

我在页面上有三个DIV，每个DIV都有一些文本。每个DIV都属于HomeBlock类：

    .HomeBlock
     {
        border:  1px solid;
        float:   left;
        padding: 8px;
        margin:  5px 0px 5px 4px;
        width:   310px;
        height:  350px;
     }

在我将缩略图例程放入第一个DIV之前，所有这一切都与世界一致。缩略图例程允许用户将鼠标悬停在缩略图上并弹出相关图像的完整大小。查看www.casnChoir.com以获取有效的示例。

在此应用程序中，它将第3个DIV推送到下一行。谁能发现原因？

这是缩略图html：

       <div style="float:left">
       <a class="thumbnail" href="#thumb"> 
       <img style="width: 100px; padding: 4px 4px 5px 5px;" 
                   src="../css/images/ktmscreen.jpg" 
                   border="0" alt="" /> 
       <span><img src="../css/images/ktmscreen.jpg" alt="" /> </span></a></div>

图片ktmscreen.jpg是700px x 522px。

以下是缩略图的CSS：

        .thumbnail{
         position: relative;
         z-index: 0;
          }

        .thumbnail:hover{
         background-color: transparent;
         z-index: 50;
          }

        .thumbnail span{ /*CSS for enlarged image*/
         position:         absolute;
         background-color: lightyellow;
         padding:          5px;
         top:              -350px;
         left:             160px;
         border:           2px solid;
         visibility:       hidden;
         color:            black;
         text-decoration:  none;
          }

        .thumbnail span img{ /*CSS for enlarged image*/
         border-width:     2px;
         padding:          2px;
          }    

        .thumbnail:hover span{ /*CSS for enlarged image on hover*/
         visibility:       visible;
         top:              -350px;
         left:             160px; /*position where enlarged image
                                   should offset horizontally */

          }

Answer 1

像这样更改你的CSS：

    .thumbnail span {
     /*CSS for enlarged image*/
     position: absolute;
     background-color: lightyellow;
     padding: 5px;
     top: -350px;
     left: 160px;
     border: 2px solid;
     display:none;
     color: black;
     text-decoration: none;
 }
 .thumbnail span img {
     /*CSS for enlarged image*/
     border-width: 2px;
     padding: 2px;
 }
 .thumbnail:hover span {
     /*CSS for enlarged image on hover*/
     display:block
     /* or try inline */
     top: -350px;
     left: 160px;
     /*position where enlarged image should offset horizontally */
 }

请记住，可见性只会切换元素的可见性，但元素本身仍然存在并具有所有属性（宽度，高度等），因此如果需要空间，它将推送任何元素。相反，display:none“将元素从布局中取出”，就好像它不存在一样。或者，您可以根据需要继续使用可视性来调整高度和宽度。请记住，您显示的是所需代码的1/4，因此可能需要进行一些调整，但很可能这足以让您隔离问题并修复它

缩略图CSS强制div到下一行

1 个答案: