清除懸停時擴大的div上的兩個屬性

Question

我已經構建了產品網格。當產品塊懸停時可以獲得更多信息。但是，這種擴展會導致與其他塊的對齊問題。

理想情況下，我希望塊可以擴展到任何其他塊。不過，我認爲，第一個塊懸停行爲如何工作（將塊向下移動並使塊向右移動）

我認爲要實現這一點的唯一方法是在每個塊上使用絕對位置真的不能做，作爲最終目標是一個CMS，將動態生成的塊。

請。

看到一個例子

http://tinyurl.com/mda3y3k

感謝任何意見或建議， s

Answer 1

你不需要給float財產這種情況。您只需爲您的blockcontainer課程添加inline-block即可。因此用浮點數代替浮點數不需要懸停時的clear屬性。

我建議你對你的類做下面的CSS修改。

.blockContainer { 
    display: inline-block; 
    margin: 1rem; 
} 

.blockContainer:hover { 
    z-index: 100; 
    display: inline-block; 
} 

這裏是WORKING DEMO的一樣。

希望這會有所幫助。

Answer 2

你能改變你的CMS中的HTML嗎？如果是的話，以下變化：

從

+------------+ +--------------+ +----------------+ 
|   | |    | |    | 
| one  | | two   | | three   | 
|   | |    | |    | 
+------------+ +--------------+ +----------------+ 
+------------+ +--------------+ +----------------+ 
|   | |    | |    | 
| four  | | five   | | six   | 
|   | |    | |    | 
+------------+ +--------------+ +----------------+ 

要：

+------------+ +--------------+ +----------------+ 
|   | |    | |    | 
| one  | | three  | | five   | 
|   | |    | |    | 
+------------+ +--------------+ +----------------+ 
+------------+ +--------------+ +----------------+ 
|   | |    | |    | 
| two  | | four   | | six   | 
|   | |    | |    | 
+------------+ +--------------+ +----------------+ 

注：塊一個，兩個三.....是的div這是顯示內聯塊或浮動div。當你改變你必須向左浮動或顯示內聯塊到你的主div包含一個.... divs。