[英]animate div height based on other div height
I am trying to set the div height of .article_description
with jQuery uniquely for each occurrence of that div. 我正在尝试使用jQuery为该div的每次出现唯一设置.article_description
的div高度。 I want it to be set so that: 我希望将其设置为:
$(".article_title").height() + $(".article_description").height() + $(".article_notes").height() = $(".photo_well").height().
I do not want to change the height of .article_title
, .article_notes
or .photo_well
. 我不想更改.article_title
, .article_notes
或.photo_well
的高度。
Here is the HTML: 这是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 %>  |  <%= 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: 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);
Try one of: 尝试以下方法之一:
$('.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);
is a syntax error. 是语法错误。
This seems to be working for me: 这似乎为我工作:
$(".article_description").load(function(){
$(this).css({height: article_description_height});
});
However, it is using the first "article_description_height" for all of them. 但是,它对所有这些都使用第一个“ article_description_height”。 I want a unique article_description_height for each ".article_description" div. 我希望每个“ .article_description” div都具有唯一的article_description_height。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.