Question

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

以下是一个示例表格单元格：

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

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

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

我也想避免使用JavaScript。仅仅因为NoScript用户可以获得正确的布局。

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

Answer 1

您应该将内容部分包装在div中，并将包装类添加到表格单元格中。然后应用'overflow：hidden'

#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;
}

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

1 个答案: