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加載問題

回答

相關問題