CSS forces div to next line

我在頁面上有三個DIV，每個都有一些文本。每個DIV是類HomeBlock的：CSS forces div to next line

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

所有是正確的與世界，直到我把我的縮略圖程序，第一個div。縮略圖例程允許用戶將鼠標懸停在縮略圖上並彈出相關圖像的全尺寸。請訪問www.casnChoir.com以獲取可用的示例。

在這個應用程序中，它將第三個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是700像素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 */ 

      }

來源

2014-08-31 Steve Woolstenhulme

改變你的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「將元素從佈局中取出」，就好像它不存在一樣。或者，您可以繼續使用可見性，以根據需要調整高度和寬度。請記住，您顯示的是所需代碼的四分之一，因此可能需要進行一些調整，但很可能這將足以讓您隔離問題並修復問題

來源

2014-08-31 04:00:38 Devin

CSS forces div to next line

回答

相關問題