Question

我想翻译这个表的html代码 http://cssdesk.com/u7r7h 在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.

使用divs模拟表格单元格行为：中间垂直对齐的文本，以及一个单元格中扩大两个单元格高度的内容

1 个答案: