[英]How to position some elements on top of table-cell and some in the bottom?
I need to position an element in the top corner of table-cell and text should stack in the bottom. 我需要在表格单元格的顶角放置一个元素,文本应该在底部堆叠。 I used vertical-align: bottom to move all the text down, but now I have a problem with the top element, since table-cell doesn't support relative positioning... any ideas how can this be done?
我使用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>
edit: It should look something like this 编辑:看起来应该是这样的
+-----------+ +-----------+ +------------+
|top text | |top text | |top text |
| | | | | |
|some long | | | | |
|text | | | | |
|more long | | | | |
|text | | | | |
|end of | | | |some text |
|text | |text | |text |
|<button> | |<button> | |<button> |
+-----------+ +-----------+ +------------+
This all is wrapped in a div with display:table. 这一切都包含在带有display:table的div中。 The reason I want to use display:table-cell here is to keep these columns equal height and still flexible to accommodate different length of text in the columns.
我之所以要使用display:table-cell,是为了保持这些列的高度相等,并且仍然可以灵活地适应列中不同长度的文本。
http://jsfiddle.net/Hwvd5/ http://jsfiddle.net/Hwvd5/
Basically what I did was putting a full-size wrapper div into it which is position: relative
. 基本上我所做的是将一个全尺寸的包装div放入其中,即
position: relative
。 Hope this works cross-browser, only tested in chromium ... 希望这可以跨浏览器工作,只测试铬...
Problem with this approach: you won't be able to let the browser automatically choose a height for the columns that matches the content without having them overlap. 此方法存在问题:您将无法让浏览器自动为与内容匹配的列选择高度,而不会让它们重叠。 :( I could think of no way to fix this.
:(我想不出办法解决这个问题。
<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: 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%;
}
将其添加到<td>
:
style="vertical-align:top"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.