如何在可變大小的 TD 內底部對齊 DIV
[英]How to bottom align a DIV within a variable size TD
問題描述
如何在高度動態更改的表格單元格中底部對齊元素（div 或 span）。
<tr><td>
<div>Top text</div>
<img src="#variableheight" style="float:right" />
<div style="vertical-align:bottom">bottom text</div>
</td></tr>
紅色的是帶有background-color的<td> 。 我需要 SO#... <div>與float:right img 底部對齊。
3 個解決方案
解決方案1
2 2015-06-13 22:19:08
您只需要“清除”應用於img的float ：
.bottom{
clear: both;
}
HTML：
<div class="bottom">bottom text</div>
小提琴： https ://jsfiddle.net/L0j6sohs/
解決方案2
0 2015-06-13 22:23:42
試試這個代碼代碼固定位置的 div 。
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#td-content {
bottom: 0;
clear: both;
position: relative;
}
table{
border:2px solid red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>Top text</div>
<img src="#variableheight" style="float:right" />
<div id="td-content">bottom text</div>
</td>
</tr>
</table>
</body>
</html>
請注意：
- 我已經刪除了內嵌 css
- 給 div 一個 id -
td-content - 包含的 css 類
- 請稍后移除表格邊框。
解決方案3
0 2015-06-13 22:32:56
您嘗試做的事情不能通過設置垂直對齊來完成。 您將必須以正常方式進行。
有兩個分區，一個給左，一個給右。 左分區將包含文本（頂部和底部），右分區將包含圖像。 現在因為圖像會調整高度，保持原樣（即靜態）但使左除絕對匹配td的邊界。 唯一要記住的是左分割與td右邊界的距離，以便它遠離img 。
td { position: relative; border: 1px solid black; width: 200px; } img { width: 50px; height: 150px; } #tdl { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 55px; } #tdr { float: right; }
<table> <tr> <td> <div id="tdl"> <div>Some text aligned on top and wraps down when it hits the image</div> <div style="position: absolute; bottom: 0px;">bottom text</div> </div> <div id="tdr"> <img src="#variableheight"/> </div> </td> </tr> </table>
如何將圖像與 td 內 div 中的底部對齊
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.