Question

所以，我的问题如下。我有一个9平方格的网格，我想做出回应。

我需要每块瓷砖在悬停时将其尺寸从210x210px（包括5px边距）增加到420x420px，因此瓷砖A和B工作正常，尺寸向右和向下增加，但是当我到达瓷砖C时，问题apears。即使所有的牌都有绝对位置，当我将鼠标悬停在C上时，它的左侧属性也不会将其大小增加到左侧，而是将其向右推。这个问题有解决方案吗？

我的想法是每个瓷砖在悬停时发现三个hiperlink图像插槽。左边和中间的瓷砖分别显示一个槽到RIGHT和两个BELOW本身，而右边的瓷砖 - 一个槽到它们的LEFT，还有两个BELOW。

这就是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）无法在任何方向上增加其尺寸，因此能够将右侧瓷砖扩展到在这个迷你项目中，左边对我来说至关重要。

警告！这部分是MESSY！：我到目前为止尝试过的选项如下： - 将 float：left; 设置为所有图块（最初的想法）。结果 - 失败/ C-tile无法重新向左移动。 - 为所有图块设置绝对位置。结果 - 失败/ C磁贴无法向左调整大小。 - 将绝对位置设置为所有图块但是C-tile。结果 - 失败 - 将 float：left; 设置为A和B，将绝对位置设置为C，希望因为A和B“忽略”C在他们的扩展中，他们不会停止它从扩展到左边。结果 - 悲惨的失败。

Answer 1

这是你的小提琴和适当的动画：）

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;
}

Answer 2

在#row1-col3中，移除left: 420px;并将其替换为right:0px。

PS - 如果要将属性设置为0，则不需要单位。因此它应该是right:0。

另外，为了对称，我调整了中间框以左右均匀扩展，以防你想尝试一下。有关工作示例，请参阅http://jsfiddle.net/w5uVF/3/。

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

2 个答案: