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

對於這個例子中我填充內容，但實際上在PHP生成內容的緣故，意味着它們被創建與內部COLS許多行。

我現在的問題是，我想讓行內的所有容器都適合彼此的身高。這裏是我的意思的exampleimage：

Answer 1

使用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>

Answer 2

嘗試使用display:inline-table和display:table-cell 看到這個樣本小提琴： https://jsfiddle.net/p6jg104L/