模仿與div的表格單元的行爲：中間垂直對齊文本，並在擴大兩個單元

Question

我想翻譯這個表的HTML代碼中DIV + CSS代碼 ​​ 的高度，一個單元格的內容。

這個想法是在任何長度的文本中，在一個最小高度的容器中，但如果需要的話，它可以在高度上放大。當文本放大綠色div時，黃色div應隨着高度放大。綠色和黃色div中的文本始終是垂直的 - 中間對齊

用一對單元格的表格實現這一點非常簡單，但對於我來說，如此難以使用div和CSS。

我花了幾個小時就沒有找到解決方案。 有什麼想法？

Answer 1

嘗試這樣：

HTML：

<div id="container"> 

    <div id="left-col"> 
     <p>column 1</p> 
     <p>some other random text</p> 
    </div> 

    <div id="right-col"> 
     <p>column 2</p> 
    </div> 

    </div> 

CSS：

#container { 
     overflow: hidden; 
     width: 100%; 
    } 
    #left-col { 
     float: left; 
     width: 50%; 
     background-color: green; 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
    } 
    #right-col { 
     float: left; 
     width: 50%; 
     margin-right: -1px; /* Thank you IE */ 
     border-left: 1px solid black; 
     background-color: yellow; 
     padding-bottom: 500em; 
     margin-bottom: -500em; 
    } 

http://jsfiddle.net/R7Y49/1/

它已經回答了here.