我需要在表格单元格的顶角放置一个元素,文本应该在底部堆叠。我使用vertical-align:bottom来移动所有文本,但现在我的top元素有问题,因为table-cell不支持相对定位......任何想法如何才能完成?
<div style = "display: table-cell; vertical-align: bottom">
<div class = "top"> Top corner</div>
<h2> some text in the bottom </h2>
<h3> some more text in the bottom </h3>
</div>
编辑:看起来应该是这样的
+-----------+ +-----------+ +------------+
|top text | |top text | |top text |
| | | | | |
|some long | | | | |
|text | | | | |
|more long | | | | |
|text | | | | |
|end of | | | |some text |
|text | |text | |text |
|<button> | |<button> | |<button> |
+-----------+ +-----------+ +------------+
这一切都包含在带有display:table的div中。 我之所以要使用display:table-cell,是为了保持这些列的高度相等,并且仍然可以灵活地适应列中不同长度的文本。
答案 0 :(得分:2)
基本上我所做的就是将一个全尺寸的包装器div放入position: relative
。希望这可以跨浏览器工作,只在铬测试...
此方法存在问题:您无法让浏览器自动为与内容匹配的列选择高度,而不会让它们重叠。 :(我想不出办法解决这个问题。
<br /> <br />
<div class="table">
<div>
First cell <br />
First cell <br />
First cell <br />
First cell <br />
First cell <br />
First cell <br />
First cell <br />
First cell <br />
</div>
<div>
<div class="wrapper">
<div class = "top"></div>
<h2> some text in the top </h2>
<h3> some more text in the bottom </h3>
</div>
</div>
</div>
CSS:
.top {
position: absolute;
top: 0;
right: 0;
width: 10px;
height: 10px;
background: red;
}
h3 {
position: absolute;
bottom: 0;
}
.table {
display: table-row;
}
.table > div {
display: table-cell;
vertical-align: bottom;
border: 1px solid black;
padding: 10px;
height: 200px;
}
.table > div > div.wrapper {
position: relative;
width: 100%;
height: 100%;
}
答案 1 :(得分:-1)
将其添加到<td>
:
style="vertical-align:top"