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

Question

我已经建立了一个产品网格。当产品块悬停时，可以获得更多信息。但是，此扩展会导致与其他块的对齐问题。

理想情况下，我希望将块扩展到任何其他块。但是，我认为第一个块悬停行为是如何工作的（将块向下移动并将块保持原样。

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

请提出任何想法或建议。

查看示例

http://tinyurl.com/mda3y3k

由于

Answer 1

您无需为此情况提供float属性。您只需为inline-block课程添加blockcontainer即可。因此，用float替换它不需要在悬停时使用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。