[英]Dynamically fit DIV Height to Content of another DIV?
的HTML
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<article id="1">
<div class="article-header">
<h2>This is a Header!</h2>
</div>
<div class="article-text">
<p>This is a Text!</p>
</div>
</article>
</div>
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6">
<article id="2">
<div class="article-header">
<h2>This is a much longer Header which will wrap over two lines!</h2>
</div>
<div class="article-text">
<p>This is a much longer Text which will wrap over also two lines!</p>
</div>
</article>
</div>
</div>
的CSS
.article-header,
.article-text{
width: 100%;
}
在本示例中,我填写了Content,但实际上内容是用PHP生成的,这意味着它们是用cols内部创建的许多行。
我现在的问题是我想让ROW内的所有容器彼此高度匹配。 这是我的意思的示例图像:
使用each
我们可以动态地固定div's
高度。
var largest = 0; //start with 0 $("article > div").each(function(){ //loop through each section var findHeight = $(this).height(); //find the height if(findHeight > largest){ //see if this height is greater than "largest" height largest = findHeight; //if it is greater, set largest height to this one } }); $("article > div").css({"height":largest+"px"});
.article-header, .article-text{ width: 50%; float:left } article > div h2{margin:0px} article > div {border:1px solid #000}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"/> <div class="row"> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12"> <article id="1"> <div class="article-header"> <h2>This is a Header!</h2> </div> <div class="article-text"> <p>This is a Text!</p> </div> </article> </div> <div class="col-xs-12 col-sm-12 col-md-6 col-lg-12"> <article id="2"> <div class="article-header"> <h2>This is a much longer Header which will wrap over two lines!</h2> </div> <div class="article-text"> <p>This is a much longer Text which will wrap over also two lines!</p> </div> </article> </div> </div>
尝试使用display:inline-table
和display:table-cell
参见以下示例小提琴: https : //jsfiddle.net/p6jg104L/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.