0

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

2 回答 2

0

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

于 2013-09-05T23:09:33.760 回答
0

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

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

<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;
}
于 2013-09-05T23:11:48.067 回答