防止嵌入式块div高度增长时内容流动

我做了一个快速的fiddle来解释此问题。防止嵌入式块div高度增长时内容流动

$(".box").on({ 
 
    mouseenter: function() { 
 
    $(this).addClass('hover'); 
 
    }, 
 
    mouseleave: function() { 
 
    $(this).removeClass('hover'); 
 
    } 
 
});

#wrapper { 
 
    width: 25em; 
 
} 
 
.box { 
 
    width: 5em; 
 
    height: 5em; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
    box-sizing: border-box; 
 
    border: 1px solid; 
 
    margin-bottom: 1em; 
 
} 
 
.hover { 
 
    height: 7em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>

当框的高度的增加，所述包装内的流动的内容的其余部分，向下流动。我想在高度增长时防止内容流动，而是将包装盒包装在其他盒子中。

我怎么能做到这一点？

来源

2015-10-20 xepe

您可以添加一个[negative'margin-bottom' rule]（http://jsfiddle.net/8j2h8j4e/2/）以匹配高度的增加。并不是说这是非常优雅的。 – Phylogenesis

选中此[小提琴]（https://jsfiddle.net/jh2wbomw/）。这有点麻烦，因为我不得不手动指定每个div的顶部和左侧，但它的工作原理。 – malhotraprateek

谢谢两位！ @malhotraprateek我需要达到这种效果，但使用内联块，当使用“位置：绝对”时，流量中断 – xepe

您可以将负面margin-bottom添加到您的hover类。

类似于this。

此外，您可以将每行包装在div中，并且需要max-height。

类似于this。

来源

2015-10-20 13:00:09

防止嵌入式块div高度增长时内容流动

回答

相关问题