Question

我有很多行的三个div容器堆叠在一起（如网格），使用左浮动，每个容器都有一个隐藏的溢出，使用最大高度限制来截断内部的内容。为了扩展我使用的div：将鼠标悬停在类上以将最大高度更改为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

尝试在div中包含三个div的组。这样可以防止其他div扩展到扩展权限。

Answer 2

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

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

<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容器保持原位，因为它们上方的div扩展并重叠

2 个答案: