CSS-Inline-Block-Objekte, die bei Hover expandieren, Elemente verlieren ihre Reihenfolge, während sie schwebten

Question

Ich verwende HTML und CSS, um einige Inline-Block-Boxen zu erstellen, die bei Hover expandieren. Aber das Problem ist, während auf einem anderen Block als zuletzt schwebend eine der Boxen verschwindet, und während der Auswahl der ersten in der Zeile etwas Seltsames passiert und einer von ihnen bewegt sich in Linie über. Ich habe verschiedene Dinge ausprobiert, scheint aber nichts zu helfen. Hier ist CSS-Code:

.floating-box { 
    display: inline-block; 
    width: 120px; 
    height: 125px; 
    margin-bottom: 1px; 
    border: 1px solid #aaaa80; 
    text-align: center; 
    overflow: hidden; 
    vertical-align: top; 
} 

.floating-box:hover { 
    height:150px; 
    padding-bottom: 5px; 
    width:120px; 
    position:absolute; 
    background-color: #e0e0d1; 
    padding-right: 1px 
} 

Und JSfiddle: https://jsfiddle.net/6Lms6ve8/

Answer 1

Hier ist eine Lösung für Sie ist, wo sie auf hover an ihrem Platz bleiben.

Dies kann auch mit einem Pseudo-Element gemacht werden, obwohl ich ein extra div verwendet habe, wenn Sie mehr Inhalt darin haben wollen.

.floating-box { 
 
    position: relative; 
 
    display: inline-block; 
 
    width: 120px; 
 
    height: 125px; 
 
    margin-bottom: 2px; 
 
    vertical-align: top; 
 
} 
 
.floating-box .box-wrapper { 
 
    width: 100%; 
 
    height: 100%; 
 
    border: 1px solid #aaaa80; 
 
    box-sizing: border-box; 
 
    text-align: center; 
 
    overflow: hidden; 
 
} 
 

 
.floating-box:hover .box-wrapper { 
 
    height: 150px; 
 
    position: absolute; 
 
    background-color: #e0e0d1; 
 
    z-index: 1; 
 
}

<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div> 
 
<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div> 
 
<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div> 
 
<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div> 
 
<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div> 
 
<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div> 
 
<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div> 
 
<div class="floating-box"> 
 
    <div class="box-wrapper"> 
 
    <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
    </div> 
 
</div>

Answer 2

entfernen Sie einfach die position:absolute; von Ihrem .floating-box:hover Selektor

position:absolute; nimmt das Element "out" des normalen Ablaufs des Elements, und der Grund, warum Sie Sieh das letzte Element deines Gitters "verschwinden" ist, dass alle Elemente nach dem Schweben um eine Stelle zurückgehen, da das Schwebte (absolut positioniert) gerade aus dem Fluss gezogen wurde.

Answer 3

bitte entfernen position

.floating-box { 
    display: inline-block; 
    width: 120px; 
    height: 125px; 
    margin-bottom: 1px; 
    border: 1px solid #aaaa80; 
    text-align: center; 
    overflow: hidden; 
    vertical-align: top; 
} 

.floating-box:hover { 

    padding-bottom: 5px; 
    width:120px; 
    height:150px; 
    background-color: #e0e0d1; 
    padding-right: 1px 
} 

DEMO HERE

Answer 4

i Code in jsfiddle behoben haben.

* { 
    box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    -ms-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
} 

.floating-box { 
    display: inline-block; 
    width: 120px; 
    height: 125px; 
    margin-bottom: 1px; 
    border: 1px solid #aaaa80; 
    text-align: center; 
    overflow: hidden; 
    vertical-align: top; 
    margin-bottom:4px; 
} 

.floating-box:hover { 
    padding-bottom: 5px; 
    width:120px; 
    background-color: #e0e0d1; 
    padding-right: 1px 
} 

Answer 5

Ihre .floating-Box ändern: schweben Position relativ

.floating-box { 
 
    display:inline-block; 
 
    width: 120px; 
 
    height: 125px; 
 
    margin-bottom: 1px; 
 
    border: 1px solid #aaaa80; 
 
    text-align: center; 
 
    overflow: hidden; 
 
    vertical-align: top; 
 
} 
 

 
.floating-box:hover { 
 
    height:150px; 
 
    padding-bottom: 5px; 
 
    width:120px; 
 
    position:relative; 
 
    background-color: #e0e0d1; 
 
    padding-right: 1px 
 
}

<div class="floating-box"> 
 
      <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
       </div> 
 
     <div class="floating-box"> 
 
      <span style="font-size:12px; text-align: justify;">sample text here</span> 
 
       </div> 
 
     <div class="floating-box"> \t 
 
      <span style="font-size:12px; text-align:justify;">sample text here</span> 
 
       </div> 
 
     <div class="floating-box"> \t 
 
      <span style="font-size:12px; text-align:justify;">sample text here</span> 
 
       </div> 
 
     <div class="floating-box"> \t 
 
      <span style="font-size:12px; text-align:justify;">sample text here</span> 
 
       </div> 
 
     <div class="floating-box"> \t 
 
      <span style="font-size:12px; text-align:justify;">sample text here</span> 
 
       </div> 
 
     <div class="floating-box"> \t 
 
      <span style="font-size:12px; text-align:justify;">sample text here</span> 
 
       </div> 
 
     <div class="floating-box"> \t 
 
      <span style="font-size:12px; text-align:justify;">sample text here</span> 
 
       </div>

Answer 6

position:absolute; aus- und einfügen transition: all .3s ease; für belebte

Demo: https://jsfiddle.net/ujt5qcfv/

Answer 7

Entfernen Sie die Position absoluten und einige Übergänge hinzufügen, um es vorzeigbar. Ihr hinzufügen Höhe wenn Sie schweben auf div das ist, warum die Elemente unten bewegen. heres die Geige:

position:absolute 

https://jsfiddle.net/s7grcqws/