Equelheight.js加载问题

我正在使用Equelheight.js在我的网站上创建相同高度的块，但现在当页面加载时块的高度相同，但是我的块中的文字覆盖了块。写入从数据库中加载。问题是内容在jquery函数后被加载。我希望这是有道理的。Equelheight.js加载问题

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 [email protected]"></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>

来源

2014-03-12 Gericke

我找到了解决办法，我只是增加了一个延迟jQuery函数揭开序幕：

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

来源

2014-03-13 07:20:46 Gericke

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

.article-block div{overflow:auto;}

但它会显示在DIV滚动条。或者，你可以调用jQuery .equalHeight（）;或者，你可以调用jQuery的。内容加载完毕后。调用$（“。article-block”）。equalHeight（）;持续。喜欢这个;

<body> 
    <div class="col-sm-4"> 
    <div class="article-block shadow" style="position: relative"> 
     <div class="pin [email protected]"></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>

让我知道它是否有效。

来源

2014-03-12 07:42:47

Equelheight.js加载问题

回答

相关问题