私のサイトで要素がレイアウトを壊す理由

Question

私はその上にマウスを置いたときに表示されるバブルを作成しました（実際は最初の要素のみ）。問題は、バブルがレイアウトを破壊し、残りの要素を移動させることです。私はそれを解決する方法を知っていない、助けてください。

次のCSSを追加

#products #productsGrid { 
 
     width: 100%; 
 
     list-style: none; 
 
     padding: 0; 
 
     } 
 
     #products #productsGrid li { 
 
     display: inline-block; 
 
     line-height: 5px; 
 
     width: 24%; 
 
     height: 200px; 
 
     margin: 15px 0; } 
 
     #products #productsGrid li header h5 { 
 
      margin: 0; 
 
      line-height: 1px; } 
 
     #products #productsGrid li header .description { 
 
      font-size: 10px; 
 
      line-height: 10px; } 
 
     #products #productsGrid li button { 
 
      border-radius: 6px; 
 
      border-style: none; 
 
      padding: 2px 20px; 
 
      background-color: #d40505; 
 
      box-shadow: inset 0 -20px 10px -10px rgba(0, 0, 0, 0.3), inset 0 10px 10px -10px rgba(0, 0, 0, 0.3); 
 
      color: white; 
 
      float: left; 
 
      width: 110px; 
 
      margin: 0; 
 
      padding: 6px 20px; } 
 
      #products #productsGrid li button span { 
 
      font-weight: bold; } 
 
     #products #productsGrid li .wojna_domowa p { 
 
      display: none; } 
 
     #products #productsGrid li .wojna_domowa:hover p { 
 
      display: block; } 
 
     #products #productsGrid li .wojna_domowa:hover .bubble { 
 
      position: relative; 
 
      width: 180px; 
 
      height: 210px; 
 
      padding: 0px; 
 
      background: #FFFFFF; 
 
      top: -130px; 
 
      right: -98px; 
 
      border-radius: 6px; 
 
      border: #00ABC8 solid 2px; } 
 
     #products #productsGrid li .wojna_domowa:hover .bubble:after { 
 
      content: ''; 
 
      position: absolute; 
 
      border-style: solid; 
 
      border-width: 12px 19px 12px 0; 
 
      border-color: transparent #FFFFFF; 
 
      display: block; 
 
      width: 0; 
 
      z-index: 1; 
 
      left: -19px; 
 
      top: 20px; } 
 
     #products #productsGrid li .wojna_domowa:hover .bubble:before { 
 
      content: ''; 
 
      position: absolute; 
 
      border-style: solid; 
 
      border-width: 13px 20px 13px 0; 
 
      border-color: transparent #00ABC8; 
 
      display: block; 
 
      width: 0; 
 
      z-index: 0; 
 
      left: -22px; 
 
      top: 19px; } 
 
     #products #productsGrid li:nth-child(1) { 
 
     margin: 0 auto 25px auto; } 
 
     #products #productsGrid li:nth-child(2) { 
 
     margin: 0 auto 25px auto; } 
 
     #products #productsGrid li:nth-child(3) { 
 
     margin: 0 auto 25px auto; } 
 
     #products #productsGrid li:nth-child(4) { 
 
     margin: 0 auto 25px auto; }

<div id="products"> 
 
    <ul id="productsGrid"> 
 
    <li> 
 
     <div class="wojna_domowa"> 
 
     <header> 
 
      <h5>Wojna domowa</h5> 
 
      <br><br> 
 
      <span class="description"> 
 
      Easy Virtue (2008) 
 
      <br><br> 
 
      produkcja: Wielka Brytania 
 
      gatunek: komedia rom. 
 
      <br><br> 
 
      </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 

 
     <div class="bubble"> 
 

 
      <p>phokuh</p> 
 

 
     </div> 
 

 
     </div> 
 
    </li> 
 
    <li> 
 
     <header> 
 
     <h5>Stary, kocham Cie</h5> 
 
     <br><br> 
 
     <span class="description">  
 
      I love You, man (2008) 
 
      <br><br> 
 
      produkcja: USA<br> 
 
      gatunek: komedia rom. 
 
      <br><br> 
 
     </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 
    </li> 
 
    <li> 
 
     <header> 
 
     <h5>Kac Vegas</h5> 
 
     <br><br> 
 
     <span class="description"> 
 
      The Hangover (2008) 
 
      <br><br> 
 
      produkcja: Niemcy<br> 
 
      gatunek: komedia. 
 
      <br><br> 
 
     </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 
    </li> 
 
    <li> 
 
     <header> 
 
     <h5>Wojna domowa</h5> 
 
     <br><br> 
 
     <span class="description"> 
 
      Easy Virtue (2008) 
 
      <br><br> 
 
      produkcja: Wielka Brytania 
 
      gatunek: komedia rom. 
 
      <br><br> 
 
     </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 
    </li> 
 
    <li> 
 
     <header> 
 
     <h5>Wojna domowa</h5> 
 
     <br><br> 
 
     <span class="description"> 
 
      Easy Virtue (2008) 
 
      <br><br> 
 
      produkcja: Wielka Brytania 
 
      gatunek: komedia rom. 
 
      <br><br> 
 
     </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 
    </li> 
 
    <li> 
 
     <header> 
 
     <h5>Stary, kocham Cie</h5> 
 
     <br><br> 
 
     <span class="description">  
 
      I love You, man (2008) 
 
      <br><br> 
 
      produkcja: USA<br> 
 
      gatunek: komedia rom. 
 
      <br><br> 
 
     </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 
    </li> 
 
    <li> 
 
     <header> 
 
     <h5>Kac Vegas</h5> 
 
     <br><br> 
 
     <span class="description"> 
 
      The Hangover (2008) 
 
      <br><br> 
 
      produkcja: Niemcy<br> 
 
      gatunek: komedia. 
 
      <br><br> 
 
     </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 
    </li> 
 
    <li> 
 
     <header> 
 
     <h5>Wojna domowa</h5> 
 
     <br><br> 
 
     <span class="description"> 
 
      Easy Virtue (2008) 
 
      <br><br> 
 
      produkcja: Wielka Brytania 
 
      gatunek: komedia rom. 
 
      <br><br> 
 
     </span> 
 
     </header> 
 
     <button type="button"><span>Więcej</span></button> 
 
    </li> 
 
    </ul> 
 
</div>

Answer 1

iはbubbleクラスは、私はすでにので、ホバーにposition: absoluteを持つことを発見し、あなたのCSSを経た後に

li { 
     position: relative; 
     vertical-align: top; 
    } 
    .bubble { 
     position: absolute; 
    } 

編集

を助けるかもしれないしてください助けてくださいliにのみプロパティを追加する必要があります。あなたは非常に簡単にjQueryを使ってこれを行うことができます

Answer 2

：

$(document).ready(function() { 
    $("button").hover(function() { 
    $(this).toggle(".bubble"); 
    } 
}); 

}); 

そして単にようないくつかのCSSを追加します。

.bubble { 
    position: absolute; 
    //Other stylings for .bubble 
}