当通过增加填充和应用负边距来“扩展”块时，布局会中断答案

【问题标题】：Layout breaks when a block is "expanded" by increasing its padding & applying negative margin当通过增加填充和应用负边距来“扩展”块时，布局会中断
【发布时间】：2012-07-19 22:33:51
【问题描述】：

有点难以用语言表达，所以here's the jsFiddle 显示它。

当悬停在其中一个绿色块上时，我希望它的背景足够扩大，以“接触”连续的矩形（它与它们的边距重叠）。但是，当悬停在每一行的最后一个块上时，布局会变得疯狂：下面的行只显示一个元素，等等。

原因似乎源于负边距；因为，如果“扩展”类的边距设置为纯 0 而不是 -5，则不会发生此问题。但是当然这会在块之间留下空间。

父容器的大小似乎并没有改变这一点。请注意，目前我并不特别担心扩展块没有很好地居中并使其行中的其他块有点摇晃这一事实，尽管它可能与问题有关。

【问题讨论】：

标签： css css-float margin

【解决方案1】：

将extended的de padding改为10px http://jsfiddle.net/TMXLz/4/

【讨论】：

优秀。所以对我来说，这更像是一个“我不知道如何计算”的问题......哎呀。
:) 发生在每个人身上，很高兴能帮上忙

【解决方案2】：

我能看到做你想做的唯一方法是将这些块中的每一个绝对（位置：绝对）定位到你想要的位置。您在这里的主要问题是您想要对盒子进行的更改将导致它们侵占彼此的空间。因此，您要么需要在每次鼠标悬停时调整它们的所有间距（使用 js）（这很糟糕）。或者将项目绝对定位到位（每个框的特定定位样式），那么它们部分重叠就不会有问题。只需确保增加活动的 z-index 以使其始终“超过”其他人。

【讨论】：

@Gijs 肯定更简单，但我个人从来不喜欢负边距。

【解决方案3】：

这可能是您正在寻找的输出

http://jsfiddle.net/TMXLz/5/

【讨论】：