浮動DIV展開懸停，將第二行div移動到左側而不是將其向下移動

因此，很難將我的問題置於單個行中。基本上，我有一堆從一個PHP腳本生成的框，他們需要是相同的高度。每個框中都有一個簡短的描述，當您將鼠標懸停在框中時，會展開其餘的內容。浮動DIV展開懸停，將第二行div移動到左側而不是將其向下移動

我的問題是，是否有可能使下方的整行向下移動擴展的數量而不會跳到左邊。如果您將鼠標懸停在div 1上方，則會看到div 4向左跳，並導致敲擊效果不理想，但如果將鼠標懸停在div 3上，則會注意到第二排以整體方式向下移動。我不確定爲什麼這發生在一個而不是另一個。請看附件小提琴

<div class="hover"></div> 

.expand{height:100px; width:120px; text-align:center; 
float:left; vertical-align:middle; border:1px solid black; margin:10px;} 

.expand:hover {height:120px;}

http://jsfiddle.net/n90ua1cp/

來源

2015-04-02 Dale

這是你想要的嗎？

.expand{ 
    height:100px; 
    width:120px; 
    text-align:center; 
    vertical-align:top; 
    border:1px solid black; 
    margin:10px; 
    display: inline-block; 
} 

.expand:hover { 
    height:120px; 
}

DEMO HERE - JSFIDDLE

來源

2015-04-02 14:24:15

是實際上，這就是我想要，但是我已經有顯示的效果：inline-block的加入到我的盒子中的應用程序，它不工作這個樣子！：/多麼令人困惑.. – Dale 2015-04-02 14:28:51

要小心...複製我的所有代碼...我不僅在顯示器中進行更改 – 2015-04-02 14:30:03

我的不好！好工作謝謝你！它現在工作正常:) – Dale 2015-04-02 14:34:04

您需要的包裝div來正確的輸出。

In html 
<div class="row"> 
<div class="expand">1</div> 
<div class="expand">2</div> 
<div class="expand">3</div> 
</div> 

In css 
.row{height: 150px;}

對於演示jsfiddle

來源

2015-04-02 14:42:24

不幸的是，由於內容是動態生成的，因此不適用於這種情況。否則它會很好。所選的答案在我的情況下非常完美。 – Dale 2015-04-02 15:13:25

浮動DIV展開懸停，將第二行div移動到左側而不是將其向下移動

回答

相關問題