Question

我正在尝试使用jQuery为该div的每次出现设置.article_description的div高度。我希望它设置为：

$(".article_title").height() + $(".article_description").height() + $(".article_notes").height() = $(".photo_well").height().

我不想更改.article_title，.article_notes或.photo_well的高度。

这是HTML：

<div class="article_well_main" >
    <div class="row" >

       <div class="photo_well col-lg-5 col-md-5 col-sm-12"> 
        <img src="<%=asset_path "#{article.image}", alt:''%>" style="width:100%">
       </div>

       <div class="col-lg-7 col-md-7 col-sm-12" >

         <h4 class="article_title"></h4> 
         <p class="article_description"><%= article.description%></p> 

         <div class="row">

           <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
             <p class="article_location" style="font-size:10px"><%= article.date_published %>  &nbsp|&nbsp <%= link_to article.source, "http://www.#{article.source}", :target => "_blank"%> </p>
             </div>
             <div class ="article-notes col-lg-4 col-md-4 col-sm-4 col-xs-4">
             <i><%=article.notes%></i>
             </div>

         </div>
       </div>

    </div>
</div>

JS：

var photo_well_height = $(".photo_well").height();
var article_title_height = $(".article_title").height();
var article_notes_height = $(".article_notes").height();
var article_description_height = photo_well_height - article_title_height - article_notes_height;

$('.article_description').css(height: article_description_height);

Answer 1

尝试以下方法之一：

$('.article_description').css({ height: article_description_height });
$('.article_description').css("height", article_description_height);
$('.article_description').height(article_description_height);

.css(height: article_description_height);是语法错误。

Answer 2

这似乎对我有用：

$(".article_description").load(function(){
    $(this).css({height: article_description_height});
});

然而，它正在使用第一个＆＃34; article_description_height＆＃34;对于他们所有人。我想为每个＆＃34; .article_description＆＃34;提供一个独特的article_description_height。 DIV。

动画div高度基于其他div高度

2 个答案: