Question

以上基本上是我的问题。我已经在SO上浏览了一些其他问题，但最接近的是关于 1 元素，不必在中心。

我在一个看不见的包装div中基本上有三个图像彼此相邻，在这里找到：http://korilu.nl/maurits/search.html

我想要的是防止两个小图像在单击时上下移动我尝试将position:relative;放在包装上，并按照上面提到的问题将position:absolute; bottom:0;放在图像上，但是它们不再位于中间位置，而是位于左上角的另一个位置。我该怎么做？

编辑：或顶部或中心，我不在乎，只要他们停止移动

Answer 1

您只需要更改jQuery脚本：

$("a").click(function(){
                $(current).animate({
                    opacity: .5,
                    height: '100px', 'margin-top': '100px'
                });
                $("img", this).animate({height: '200px','margin-top': '0px', opacity: 1});
                current = "#" + $(this).find("img").attr("id");
            });

请注意margin-top的两个新出现。在您的网站上尝试并按您的意愿工作。

Answer 2

#icons
{
  text-align:center;
  height:20%;
  display: block;
  width: 405px;
  margin: 0 auto;
}
#icons a
{
  float: left;
}

立即删除其中一个链接上的边距/填充。我将宽度设置为405px，因为你可能会有一些样式将其中一个推送到下一行。

Answer 3

尝试使包装div相对，然后绝对属性将从包装器而不是整个文档计数。

然后你可以通过设置left：0来定位;底部：0;和右：0;底部：0;用于左右图标。

让3个图像粘在父div底部的中心，彼此相邻

3 个答案: