css - 具有 padding-left 属性的 DIV 被推到右边

Question

JSFiddle Example

所以，我的问题如下。我有一个 9-tile 网格，我想使其响应。

悬停时我需要将每个图 block 的大小从 210x210px(包括 5px 边距)增加到 420x420px，因此图 block A 和 B 工作正常，向右和向下增加尺寸，但是当我到达图 block C 时，a问题出现了。尽管所有图 block 都有绝对位置，但当我将鼠标悬停在 C 上时，它的 padding-left 属性不会向左增加其大小，而是将其向右推。这个问题有解决办法吗？

我的想法是，当悬停时每个图 block 都会显示三个 hiperlink 图像槽。左边和中间的方 block 分别在右边显示一个槽位，在它们自己下方显示两个槽位，而右边的方 block -在它们的左侧和下方显示两个槽位。

这是 CSS 的样子:

#row1-col1 {
    width: 200px;
    height: 200px;
    position: absolute;
    top: 0px;
    left: 0px;
    background: red;
    margin: 5px;
    -webkit-transition: padding-right .5s, padding-bottom .5s;
    transition: padding-right .5s, padding-bottom .5s;
    z-index: 98009;
}

#row1-col1:hover {
    padding-right: 210px;
    padding-bottom: 210px;
}

#row1-col2 {
    width: 200px;
    height:200px;
    position: absolute;
    top: 0px;
    left: 210px;
    background: red;
    margin: 5px;
    -webkit-transition: padding-right .5s, padding-bottom .5s;
    transition: padding-right .5s, padding-bottom .5s;
    z-index: 98008;
}

#row1-col2:hover {
    padding-right: 210px;
    padding-bottom: 210px;
}

#row1-col3 {
    width: 200px;
    height:200px;
    position: absolute;
    top: 0px;
    left: 420px;
    background: red;
    margin: 5px;
    float: right;
    -webkit-transition: padding-left .5s, padding-bottom .5s;
    transition: padding-left .5s, padding-bottom .5s;
    z-index: 98007;
}

#row1-col3:hover {
    padding-left: 210px;
    padding-bottom: 210px;
}

提前感谢您提供的任何建议，因为我整晚都在努力解决这个问题，但没有任何运气。我能得到的最好的结果是 (C) 瓦片只能向下扩展，但这种配置使第 9 个也是最后一个瓦片 (I) 无法在任何方向增加其尺寸，因此能够将右侧瓦片扩展到在这个迷你元素中，left 对我来说至关重要。

警告!这部分很乱!:到目前为止我尝试过的选项如下:- 将float: left; 设置为所有图 block (最初的想法)。结果 - 失败/C-tile 无法向左调整。- 为所有方 block 设置绝对位置。结果 - 失败/C 磁贴无法向左调整大小。- 将绝对位置设置为所有瓷砖，但 C 瓷砖。结果失败- 将float: left;设置为A和B，将absolute position设置为C，希望因为A和B在扩展时“忽略”C，所以它们不会停止它从向左扩展。结果 - 惨败。

Answer 1

这是你的 fiddle 和适当的动画 :)

fiddle

这是修改后的CSS

#row1-col3 {
    width: 200px;
    height:200px;
    position: absolute;
    top: 0px;
    right: 0px;
    background: red;
    margin: 5px;
    float: right;
    -webkit-transition: padding-right .5s, padding-bottom .5s;
    transition: padding-right .5s, padding-bottom .5s;
   z-index: 98007;
}

#row1-col3:hover {
    padding-right: 210px;
    padding-bottom: 210px;
    z-index:98009;
}