CSS表格單元大小問題

Question

我已經創建了一個包含兩行的CSS表格佈局 - 第一個單元格中包含圖像，第二個單元格包含標題。在此之下，內容將出現，但這不是問題。

每當我嘗試這個，我得到了大量超大表格單元格的頂部表格行，我似乎無法調整大小。任何幫助，將不勝感激。

我已經顏色編碼的表格單元格和橙色塊是圖像。似乎已經創建了下面的空白區域，因爲藍色表格單元非常大。

<div class="table"> 
     <div class="tr-header"> 
      <div class="image-cell"> 
       <img src="orange.png"/> 
      </div> 
      <div class="title"> 
      <h1>title</h1> 
      </div> 
     </div> 
     <div></div> 
     <div class="tr-content"> 
      <div class="content"> 
       <!-- Lorem Ipsum -->    
      </div> 
     </div> 
</div> 

而CSS：

* 
    { 
    margin:0px; 
    padding:0px; 
    } 
    #table 
    { 
    display: table; 
    } 
    .tr-header 
    { 
    width:100%; 
    display: table-row; 
    height:185px; 
    } 
    img 
    { 
    width: 285px; 
    height: 185px; 
    } 
    .image-cell 
    { 
    width:285px; 
    height:185px; 
    display: table-cell; 
    } 
    .title 
    { 
    display: table-cell; 
    background-color:blue; 
    width:100%; 
    height:185px; 
    } 
    .tr-content 
    { 
    display: table-row; 
    } 
    .content 
    { 
    background-color:yellow; 
    display: table-cell; 
    width:100%; 
    } 

道歉，如果顏色編碼並沒有幫助或者我的代碼不容易閱讀，或者如果我剛剛作出了一個愚蠢的錯誤，但我已經搜查通過W3的網站和之前的stackoverflow問題。

在此先感謝。

編輯：

添加垂直對齊：頂部.title僞已顯著減少這個問題，但我還是留下了這一點：

Answer 1

你需要總是擔心垂直與表格對齊 - 即使是css風格的似乎。

只是一個vertical-align屬性添加到標題類：

.title { 
display: table-cell; 
vertical-align: top; 
background-color:blue; 
width:100%; 
height:185px; 
}