Javascript 扩展网格-定位按钮

你好，我是新来的，遇到了麻烦，我不知道自己在做什么，希望能得到一些帮助。 所以我要做的是把这个按钮放在有红色边框的盒子里，并且仍然设法打开内容框

我的目标是：

HTML:

    <div class="grid-thumb">
    <a href="#"><img src="http://placehold.it/350x150" alt="" /></a>

    <button class="grid-thumb-link">Click to open Content box</button>

  </div>
  <div class="grid-content">Success
    <a href="#" class="close-gridder">X
    </a>
  </div>

$(window).load(function() {

  $(".grid-thumb-link").click(function(event) {

    event.preventDefault();

    $(this).addClass('active');
    $(this).parent('.grid-thumb').siblings().find('.grid-thumb-link').removeClass('active');
    $(this).parent('.grid-thumb').next('.grid-content').show();
    $(this).parent('.grid-thumb').siblings().next('.grid-content').hide();

    $('html,body').animate({
        scrollTop: $(this).offset().top
      },
      'slow');

  });

  $('.close-gridder').click(function() {
    $('.grid-content').removeClass('gridcontshow').hide();
    $(".grid-thumb-link").removeClass('active');

  });

});

CSS

button.grid-thumb-link {
  display: block;
  margin: 0 auto;
}

这里有一个演示

请尝试以下方法：

(一)

(二)

3） 添加类

.grid-thumb a{
 display: block;
}

---

我在手机上，所以我还没能玩CSS，但它看起来可能与content类的float属性有关。无论显示和位置如何，浮动都会将其他对象推到一边。您可以将

网格拇指的高度固定到
div吗？感谢各位的回复，我试图摆弄浮动，看不到任何区别。塔希尔·艾哈迈德（Tahir Ahmed）固定了身高，我也同意。很好，谢谢你，这似乎很管用。如果没有更好的办法，我就这么做。你知道我将如何隐藏按钮并在图像上悬停显示它吗？试过这种方法，不确定这是否是一个好的解决方案，当我悬停的时候，也有一些丑陋的运动。
.grid-thumb:hover button.grid-thumb-link { 
 display: block;  
 margin: -30px auto 0 auto;
}

.grid-thumb a{
 display: block;
}