使浮动 div 容器保持原位，因为它们上方的 div 展开和重叠答案

【问题标题】：Make floating div containers stay in place as divs above them expand and overlap使浮动 div 容器保持原位，因为它们上方的 div 展开和重叠
【发布时间】：2013-09-08 02:28:00
【问题描述】：

我有很多行，每行三个 div 容器使用 float left 堆叠在一起（像网格一样），每个容器都有一个隐藏的溢出，使用最大高度限制来截断里面的内容。为了扩展 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;
}

【问题讨论】：

如果你让它们浮动，它们是如何相互堆叠的？在你的 div 上使用 position:absolute 和 z-index。
我没有看到float，请展示你的作品。 @Tim 这可能是因为容器宽度。
@Tim - 如果没有足够的宽度浮动将向下移动并尝试在下方再次向左浮动。我会尝试 z-index 和 AP。建议作为答案？
@PHPglue：奇怪 - 我在 CSS 中有 float 属性，但我想我在进行故障排除时删除了它，并且在发布此内容时忘记将其放回原处。我会加回来的。

标签： html css-float css

【解决方案1】：

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

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

<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;
}

【讨论】：

太棒了。我不得不做一些调整，但你的解决方案让我大部分时间都在那里。我想知道：行可以用来包含浮动左 div 吗？或者当它们扩展时它们总是会松散并四处走动？我还使用 .row:nth-of-type 设置行的 z-index，以便扩展的溢出覆盖它下面的行。

【解决方案2】：

尝试在 div 中包装三个 div 组。这将防止将其他 div 浮动到展开的右侧。

【讨论】：

不走运。我尝试使用一个名为“row”的 div 将每组三个相邻的 div 包装起来，但不幸的是，当上面的 div 向下扩展到它们时，它们并没有固定到位。我什至尝试设置宽度以将 div 行容器锁定到位，但它似乎没有任何效果，并且它们仍然在 float:left 行为的流程中移动和移动。