动态将DIV高度调整为另一个DIV的内容？

Question

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%;
}

For the sake of this Example i filled in Content but actually the content is generated in PHP, means they are created many rows with cols inside.

My Problem right now is that i want to have all containers inside the ROW fit to each other in height. Here is an exampleimage of what i mean:

Answer 1

Using each we can fix height of the div's dynamically.

 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> 

Answer 2

尝试使用display:inline-table和display:table-cell参见以下示例小提琴： https : //jsfiddle.net/p6jg104L/