Ich habe eine Blase erstellt, die angezeigt wird, wenn Sie die Maus darüber (eigentlich nur das erste Element). Das Problem ist, Blase zerstört das Layout und verschiebt den Rest der Elemente. Ich weiß nicht, wie ich es lösen kann, Hilfe. bitte helfen Sie bitteWarum Element bricht Layout in meiner Website

#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>

2016-05-25 Tomsz Comasz

so wollen u nicht das blaue Feld von .bubble Ritus? –

Gebrauchsposition: absolut; anstelle von position: relativ, so dass es oben auf deinem Inhalt liegt und nicht Teil deines Inhalts ist. – rsn

Hinzufügen könnte folgende CSS

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

bearbeiten

, nachdem sie durch Ihre CSS helfen, fand ich, dass bubble Klasse i bereits position: absolute auf schweben, die so Sie müssen nur die Eigenschaft li hinzufügen.

Quelle

2016-05-25 16:25:16

Sie können dies tun mit jQuery sehr leicht:

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

});

Und dann einfach nur einige CSS hinzufügen:

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

Quelle

2016-05-25 16:27:27 torus

Warum Element bricht Layout in meiner Website

Antwort

bearbeiten

Verwandte Themen