html - 使 float 的 div 容器保持原位，因为它们上方的 div 展开并重叠

Question

我有许多行的三个 div 容器彼此堆叠(像一个网格)，使用 float 左，每个容器都有一个隐藏的溢出，使用最大高度限制来截断里面的内容。为了扩展 div，我在类上使用 :hover 将最大高度更改为 999px，在鼠标悬停时显示内容，但是当悬停的 div 扩展下面的 div 时，它被粉碎，向右移动，或下降到悬停的 div 的最低点以下，使 div 困惑且看起来很糟糕。

如何让悬停的 div 展开以显示内容而不影响下面的 div？

.clips   {
    width: 294px;
    max-height: 150px;
    padding: 2px;
    background-color: #EBEBEB;
    overflow: hidden;
    border: 1px solid #666;
    display: block;
    margin: 0;
    float: left;
}
.clips:hover {
    max-height: 999px;
}

Answer 1

我建议使用绝对定位而不是 float

首先，您需要将每一行包装在一个相对定位的 block 中，以便它们堆叠，您可以将“单元格”定位在“行”内

<div class="row">
    <div class="cell">a</div>
    <div class="cell">b</div>
    <div class="cell">c</div>
</div>
<div class="row">
    <div class="cell">d</div>
    <div class="cell">e</div>
    <div class="cell">f</div>
</div>
<div class="row">
    <div class="cell">g</div>
    <div class="cell">h</div>
</div>

然后像这样设计

.row{
    position: relative;
    height: 20px;
}
.cell{
    width: 33%;
    outline: 1px dashed blue;
    position: absolute;
}
.cell:nth-of-type(1){
    left: 0;
}
.cell:nth-of-type(2){
    left: 33%;
}
.cell:nth-of-type(3){
    left: 66%;
}
.cell:hover{
    height: 200px;
    background: pink;
}