如何将一些元素放在表格单元格的顶部,一些元素放在底部?

时间:2012-11-10 06:40:27

标签: html css

我需要在表格单元格的顶角放置一个元素,文本应该在底部堆叠。我使用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,是为了保持这些列的高度相等,并且仍然可以灵活地适应列中不同长度的文本。

2 个答案:

答案 0 :(得分:2)

http://jsfiddle.net/Hwvd5/

基本上我所做的就是将一个全尺寸的包装器div放入position: relative。希望这可以跨浏览器工作,只在铬测试...

此方法存在问题:您无法让浏览器自动为与内容匹配的列选择高度,而不会让它们重叠。 :(我想不出办法解决这个问题。

来自JSFiddle的文件

<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"