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

JSFiddle示例

因此，我的问题如下。我有一个9格的网格，我想做出响应。

当悬停时，我需要每个图块将其大小从210x210px（包括5px的边距）增加到420x420px，因此图块A和B可以正常工作，向右和向下增大尺寸，但是当我对图块C进行处理时，问题就解决了。即使所有磁贴都具有绝对位置，但当我将鼠标悬停在C上时，其padding-left属性不会将其大小增加到左侧，而是将其向右推。有解决这个问题的方法吗？

我的想法是将每个磁贴悬停以发现三个hiperlink图像插槽。左图块和中央图块分别向右显示一个插槽，而其自身下方显示两个插槽，而右图块-分别向左和中央显示一个插槽，以及两个左下方。

这是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）无法无方向增加其大小，因此能够将右侧磁贴扩展到在这个小型项目中，离开对我来说至关重要。

警告！这部分是混乱的：到目前为止，我已经尝试过的选项如下：-Set float：left; 所有图块（最初的想法）。结果-失败/ C-tile无法向左对齐。-设置所有瓷砖的绝对位置。结果-失败/ C磁贴无法向左调整大小。-将绝对位置设置为所有图块，但C-tile。结果-失败-设置浮点数：左；对A和B的绝对立场，以及对C的绝对立场，希望是因为A和B在扩展过程中“忽略”了C，所以他们不会阻止它向左扩展。结果-严重故障。