Миниатюра CSS заставляет div перейти к следующей строке

Question

У меня есть три DIVs на странице, каждая из которых имеет некоторый текст. Каждый DIV имеет класс HomeBlock:

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

Все правильно с миром, пока я не кладу обычные миниатюры в первом DIV. Процедура thumbnail позволяет пользователю навести указатель мыши на миниатюру и отобразить соответствующий размер изображения в полном размере. Посмотрите на 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 изображение 700px х 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 необходимого кода, поэтому может потребоваться некоторая корректировка, но вполне вероятно, этого будет достаточно, чтобы вы могли изолировать проблему и исправить ее.