简体   繁体   English

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

[英]let 3 images stick to the center of the bottom of the parent div, next to each other

That above is basically my problem. 以上基本上是我的问题。 I already browsed some other questions on SO, but the one closest was about 1 element, that doesn't have to be in the center. 我已经在SO上浏览了一些其他问题,但最接近的一个是大约1个元素,不一定是在中心。

I basically have three images next to each other in an invisible wrapper div, found here: http://korilu.nl/maurits/search.html 我在一个看不见的包装div中基本上有三个图像彼此相邻,在这里找到: http//korilu.nl/maurits/search.html

What I want is to prevent the two images that are small from going up and down when one is clicked. 我想要的是防止两个小图像在单击时上下移动。
I tried to put position:relative; 我试图把position:relative; on the wrapper and position:absolute; bottom:0; 在包装和position:absolute; bottom:0; position:absolute; bottom:0; on the images as suggested in question mentioned above, but then they are not in the middle anymore, but over eachother in the upperleft corner. 在上面提到的问题所提出的图像上,但是它们不再在中间,而是在左上角的另一个上方。 How do I do this? 我该怎么做呢?

EDIT: Or top or center, I dont care, as long as they stop moving 编辑:或顶部或中心,我不在乎,只要他们停止移动

You just need to alter your jQuery script: 你只需要改变你的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");
            });

Note the two new occurences of margin-top. 请注意margin-top的两个新出现。 Tried it on your site and works as you want it. 在您的网站上尝试并按您的意愿工作。

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

Get rid of the margin/padding you have on one of the links right now. 摆脱现在其中一个链接上的边距/填充。 I set the width to 405px cause you might have some styling that pushes one of them to the next line otherwise. 我将宽度设置为405px,因为您可能会有一些样式将其中一个推送到下一行。

Try making the wrapper div relative as well, then absolute property will count from the wrapper instead of the whole document. 尝试使包装div相对,然后绝对属性将从包装器而不是整个文档计数。

You can then position by setting left:0; 然后你可以通过设置left:0来定位; bottom:0; 底部:0; and right:0; 和右:0; bottom:0; 底部:0; for the left and right icons. 用于左右图标。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM