css - 清除在悬停时展开的 div 上的两个属性

Question

我已经建立了一个产品网格。将鼠标悬停在产品块上时会显示更多信息。但是，这种扩展会导致与其他块的对齐问题。

理想情况下，我希望这些块在任何其他块上扩展。但是，我认为第一个块悬停的行为方式是有效的（将下面的块向下移动，并使块保持原样。

我能想到的唯一方法是在每个块上使用绝对位置。真的不能这样做，因为最终目标是一个可以动态生成块的 cms。

请有任何想法或建议。

看一个例子

http://tinyurl.com/mda3y3k

谢谢

Answer 1

对于这种情况，您无需提供float财产。您只需要inline-block为您的blockcontainer班级添加一个。因此，用浮动替换它不需要clear悬停时的属性。

我建议您对您的类进行以下 CSS 更改。

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

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

这是相同的工作演示。

希望这可以帮助。

Answer 2

你能改变你的cms中的html吗？如果是，请执行以下更改：

从

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

到：

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

注意：块一，二三......是显示内联块或浮动div的div。当您更改时，您必须向左浮动或显示内联块到您的主 div，其中包含一个，.... div。