html - Div 在网站上没有正确对齐(尽管在 CodePen 中工作正常)

Question

我的网站由并排排列的绿色框 (div) 组成。每行有 3 个 div，它们的高度应该相同。

除了某些原因，页面底部有 3 个 div 未正确对齐外，一切正常。

虽然这个问题只出现在我的网站上，但由于某种原因在 CodePen 中工作正常。你能指出问题所在吗？

Here is my site (向下滚动查看问题)

这是 codepen (由于某种原因没有问题)

这是显示我的服务器上的问题的屏幕截图:

div 的 HTML 是:

  <a href="http://www.Demo Demo/Land/details_land.html">
     <p class="vignette" style="background-image:url(http://jasoncampbell.net46.net/public/5.jpg)"></p>
    <div> 

      <p class="titlebox">Sample Title Title Title</p>
      <p>Demo Demo</p>
      <p>Demo Demo</p>
    </div>
  </a>

Answer 1

    .mainbox {
  width:80%;
  margin:auto;
  overflow:hidden;
  text-align:center;
  height: 4000px;
}
.mainbox a {
display: inline-block;
vertical-align: top;
margin: 0 0.5em 0;
width: 25%;
background: #A1F997;
box-shadow: 0 50px 0 #A1F997 , 0 100px #A1F997 , 0 150px #A1F997;
border-top: 1em solid white;
padding: 0.5em;
margin-top: 151px;
height: 450px;}

立即尝试