等高板？

Question

我正在試圖在右側做一個面板，使左側的兩個面板在彼此頂部的高度相等。

喜歡這個：http://i.imgur.com/S0uMCut.png

我一直在使用.row-EQ高的CSS嘗試，但它不會拉伸板本身。

<!-- Row #2 --> 
    <div class="row"> 
     <div class="container row-eq-height"> 
      <div class="col-md-4"> 
       <!-- Information panel --> 
       <div class="panel panel-default -->"> 

        <div class="panel-heading"> 
         <p class="panel-title">Information</p> 
        </div> 

        <div class="panel-body"> 
         <h4 id="numVal">Value: 0</h4> 
        </div> 

       </div> 

       <!-- Secondary box --> 
       <div class="panel panel-default secondPanel"> 
        <div class="panel-heading"> 
         <p class="panel-title">Box2</p> 
        </div> 

        <div class="panel-body"> 
        </div> 
       </div> 
      </div> 

      <!-- Main panel --> 
      <div class="col-md-8"> 
       <div class="panel panel-default mainPanel"> 
        <div class="panel-body"> 

        </div> 
       </div> 
      </div> 

     </div> 
    </div> 

我對這一切還是陌生的，所以請耐心等待！我會很感激一些幫助！謝謝！

編輯：CSS：https://pastebin.com/7RXYYH3w對不起，我沒有包括它之前！

Answer 1

我調整了一下，並添加顯示：flex到外部容器。這似乎是做你以後的事情。

<div class="row"> 
    <div class="row container-fluid" style="display:flex"> 
     <div class="col-md-4"> 
      <!-- Information panel --> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> 
        <p class="panel-title">Information</p> 
       </div> 
       <div class="panel-body"> 
        <h4 id="numVal">Value: 0</h4> 
       </div> 
      </div> 
      <!-- Secondary box --> 
      <div class="panel panel-default secondPanel"> 
       <div class="panel-heading"> 
        <p class="panel-title">Box2</p> 
       </div> 
       <div class="panel-body"> 
       </div> 
      </div> 
     </div> 
     <!-- Main panel --> 
     <div class="panel panel-default mainPanel col-md-8"> 
      <div class="panel-body"> 

      </div> 
     </div> 
    </div> 
</div> 

Answer 2

您可以使用Flexbox屬性來匹配高度。 以下是我認爲你正在嘗試做的：http://jsfiddle.net/DTcHh/33186/

.row-eq-height{ 
    display: flex; 
} 
.take-up-space{ 
    flex:1; 
} 

.flex-column{ 
    display: flex; 
    flex-direction: column; 
} 

而且，這裏是一般上手上Flexbox的一個好辦法：https://css-tricks.com/snippets/css/a-guide-to-flexbox/