使div的部分填充表格单元格的背景

Question

我目前正在努力创建一个表格单元格，该单元格的内容左右有两个 div 容器。这些容器应该占据单元格的整个高度并有一些填充（10px）。问题是表格单元格具有相对的高度和宽度！因此，当我在 div 上使用相对高度和宽度时，它们不会显示出来。

这是一个示例表格单元格：

+----------------------------------------------+
| +-----------+                  +-----------+ |
| |           |                  |           | |
| |           |                  |           | |
| |           |                  |           | |
| |           |                  |           | |
| |  div1     |                  |   div2    | |
| |           |      Some        |           | |
| |           |      Content     |           | |
| |           |                  |           | |
| |           |                  |           | |
| |           |                  |           | |
| |           |                  |           | |
| +-----------+                  +-----------+ |
+----------------------------------------------+

div 有内容和背景。另外我想让实际内容在单元格中垂直居中。 “内容”只是一个数字，但 div 会有更多的内容。

这里是表格的 jsFiddle：http://jsfiddle.net/D46TQ/

我也想避免使用 JavaScript。仅仅是因为这样 NoScript 用户将获得正确的布局。

我在考虑桌子。但是如果表格不用于显示内容，那么表格是一个糟糕的解决方案。

Answer 1

您应该将内容部分包装在一个 div 中，并向表格单元格添加一个包装类。然后应用'溢出：隐藏'

#div1, #div2{
    width: 25%;
    overflow:hidden;
    background-color:white;
    height: 100%;
    float:left;
}

#content{
    width: 50%;
    height:100%;
    overflow:hidden;
}

.wrapper{
    overflow:hidden;
    height:100%;
    width:100%;
    float:left;
}