4

JSFiddle 示例

所以，我的问题如下。我有一个 9-tile 网格，我想让它做出响应。

我需要在悬停时将每个图块的大小从 210x210 像素（包括 5 像素边距）增加到 420x420 像素，因此图块 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) 无法在任何方向上增加其大小，因此能够将右侧瓦片扩展到在这个迷你项目中，left 对我来说至关重要。

警告！这部分很乱！：到目前为止我尝试过的选项如下： -Set float: left; 到所有瓷砖（最初的想法）。结果 - 失败/C-tile 无法向左调整。-为所有瓷砖设置绝对位置。结果 - 失败/C 磁贴无法向左调整大小。- 为所有瓷砖设置绝对位置，但 C 瓷砖。结果-失败-设置浮动：左；到 A 和 B 和绝对位置到 C，希望因为 A 和 B 在他们的扩展中“忽略”了 C，他们不会阻止它向左扩展。结果——惨败。

4

2 回答 2

1

这是您的小提琴和适当的动画:)

小提琴

这是更改后的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;
}
于 2013-09-28T05:16:07.573 回答
0

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

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

另外，为了对称起见，我调整了中间的盒子，使其左右均等地展开，以防你想试一试。有关工作示例，请参见http://jsfiddle.net/w5uVF/3/ 。

于 2013-09-28T05:11:27.343 回答