html - 使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;
}