html - 用 div 模拟表格单元格的行为：中间垂直对齐的文本，以及一个单元格中的内容，它放大了两个单元格的高度

Question

我想 在 div + css 代码中翻译此表 html 代码http://cssdesk.com/u7r7h 。

这个想法是在一个最小高度的容器中放置任意长度的文本，但如果需要，它可以在高度上放大。当文本放大绿色 div 时，黄色 div 的高度也应随之放大。绿色和黄色 div 中的文本始终是垂直的 - 居中对齐

使用带有一对单元格的表格很容易实现这一点，但对我来说，使用 div 和 CSS 就很难了。

我花了几个小时在上面，但没有找到解决方案。任何想法？

Answer 1

Try something like this:

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/

it has already been answered here.