我需要在表格單元格的頂部角落放置一個元素，文本應該放在底部。我使用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> | 
+-----------+ +-----------+ +------------+

這一切都被包裹在顯示一個div：表。我想使用display：table-cell的原因是保持這些列的高度相同並且仍然靈活以適應列中不同長度的文本。

來源

2012-11-10 skyisred

你能描述你希望這看起來多一點？你的包裝div有沒有適用於它的樣式（其他的是內聯樣式）。有一個高度？您想要.top div在哪個頂角？也許模擬圖像可能有助於獲得一些很好的答案。 – 3dgoo

你想要看起來像這樣的東西嗎？ http://jsfiddle.net/Kse3g/1/只是沒有通過在CSS中使用顯式高度來僞造結果？ – 3dgoo

不能加載該鏈接，對不起！我在描述中添加了一個'圖片':) – skyisred

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

來源

2012-11-11 01:12:29 opatut

我也會使用定位來將它們設置在底部。孩子 - >父母的div是。 – Si8

-1

一下添加到<td>：

style="vertical-align:top"

來源

2016-07-27 11:46:18 rvdfox

如何將一些元素放置在表格單元格上，還有一些放在底部？

回答

文件來自的jsfiddle

相關問題