Question

我厌倦了搜索而无法完成此操作：单元格左上角的1个标签和底部中心的内容。尝试实现此目标，我＆＃39 ;我在TD内部使用2个div，但是只要我能达到目标，我就不介意改变它。

我不知道标签的大小（它们可以翻译成不同的语言，因此可以采用不同的大小）。
原始桌子的高度为A4肖像的一半。它的7（行）* 5（列）（除了中间的1个单元格，我使用rowspan =＆＃34; 2＆＃34;）
我已经尝试过＆＃34;将父级设置为position: relative并制作容器position: absolute; bottom: 0＆＃34;解决方案，我无法使其发挥作用。
基本上，我想要为top left设置1个标签，并在单元格的bottom middle中设置内容。
950px宽度用于打印目的。

这是一个jsfiddle链接来举例说明我的问题。 http://jsfiddle.net/o1L31qwu/

提前致谢。

Answer 1

像这样更改你的CSS：

.tableClass {
    width: 950px;
    table-layout: auto;
    margin-top: 8px;
    border-color: black;
    border-width: 0 0 1px 1px;
    border-style: solid;
    border-spacing: 0;
    border-collapse: collapse;    
}

.tableClass td{
    border-color: black;
    border-width: 1px 1px 0 0;
    border-style: solid;
    margin: 0;
    padding: 4px 0;
    position:relative;
    vertical-align:top;
}
.label{position:relative; margin:4px; margin-bottom:30px /* adjust to bottom size */; }
.content{width:100%; position:absolute; bottom:1px; left:0; background:#fc0; margin:0; text-align:center;}

我添加了背景颜色用于可视化目的，但您当然需要随意编辑。 See fiddle here

Answer 2

这是一个Flexbox解决方案，可以处理任意大小的.label和.content：http://jsfiddle.net/5kzzgkgr/。

单元格的内容应放在包装div：

中

<td>
     <div>
         <div class="label">This Label is large / and divided [eph] really large label.And some more text, text, text, and more text.....<br /><br /></div>
         <div  class="content">BOTTOM</div>
     </div>
</td>

CSS：

.tableClass td{
    height: 0px;
}

.tableClass div:only-of-type {
    height: 100%;
    background-color: #ccc;
    display: flex;
    flex-flow: column wrap;
    justify-content: space-between;
}

如何在表格单元格的底部放置div？

2 个答案: