Question

如何在表格单元格中底部对齐高度动态变化的元素（div或span）。

<tr><td>
<div>Top text</div>
<img src="#variableheight" style="float:right" />
<div style="vertical-align:bottom">bottom text</div>
</td></tr>

enter image description here
红色的是带有<td>的{{1}}。我需要SO＃... background-color与<div> img。

对齐

Answer 1

你只需要清除＆＃34; float已应用于img：

.bottom{
    clear: both;
}

HTML：

<div class="bottom">bottom text</div>

FIDDLE：https://jsfiddle.net/L0j6sohs/

Answer 2

尝试使用此代码 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类
请删除后边的桌边。

Answer 3

通过设置垂直对齐，无法完成您要做的事情。你必须以正常的方式做到这一点有两个部门，一个用于左侧，另一个用于右侧。左分区将有文本（顶部和底部），右分区将包含图像。现在因为图像将调整高度，保持原样（即静态），但使左分割绝对匹配td的边界。唯一要记住的是左分区与td右边界的距离，以便它远离img。

<强> Fiddle

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

3 个答案: