Question

我正在使用Equelheight.js在我的网站上创建相同高度的块，但现在当页面加载时，块的高度相同，但是我的块中的写入遍历块。写入从数据库加载。问题是在jquery函数之后内容被加载。我希望这一点都有意义。

Jquery的

$(document).ready(function () {
    $(".article-block").equalHeight();
});

CSS

.article-block
{
background-color: #fff;
text-align: left;
padding: 21px 21px;
margin: 0 0 15px 0;
position: relative;
}

HTML

<div class="col-sm-4">
<div class="article-block  shadow" style="position: relative">
    <div class="pin pin-@colour"></div>
    <div>
        <a href="@Url.Action("Article","Home")"><img class="article-image img-responsive" src="@Url.Content(item.ImagePath)" alt="Image" /></a>
    </div>
    <br />
    <div class="article-heading">
        <a class="article-heading" href="@Url.Action("Article","Home")">@item.Title</a>
    </div>
    <div class="article-date">
        @item.DateCreated
    </div>
    <br />
    <div class="article-intro">
        @item.Introduction
    </div>
    <div class="read-more bottom">
        <a class="read-more" href="@Url.Action("Article","Home")">Read more</a>
    </div>
</div>

Answer 1

你可以发一个小提琴吗？无论如何，尝试添加这个CSS：

.article-block div{overflow:auto;}

但它会在div上显示滚动条。

或者，你可以调用jQuery .equalHeight（）;加载内容后。调用$（“。article-block”）。equalHeight（）;持续。像这样;

<body>
  <div class="col-sm-4">
    <div class="article-block  shadow" style="position: relative">
      <div class="pin pin-@colour"></div>
      <div>
        <a href="@Url.Action("Article","Home")"><img class="article-image img-responsive" src="@Url.Content(item.ImagePath)" alt="Image" /></a>
      </div>
      <br />
      <div class="article-heading">
        <a class="article-heading" href="@Url.Action("Article","Home")">@item.Title</a>
      </div>
      <div class="article-date">
        @item.DateCreated
      </div>
      <br />
      <div class="article-intro">
        @item.Introduction
      </div>
      <div class="read-more bottom">
        <a class="read-more" href="@Url.Action("Article","Home")">Read more</a>
      </div>
    </div>
  </div>
  <script type='text/javascript'>
    $(document).ready(function () {
      $(".article-block").equalHeight();
    });
  </script>
</body>

让我知道它是否有效。

Answer 2

我找到了解决方案，我刚刚为jquery函数添加了延迟启动：

setTimeout(function(){
    $(".article-block").equalHeight();
}, 500);

Equelheight.js加载问题

2 个答案: