如何在可变大小的TD内底部对齐DIV
如何在可变大小的TD内底部对齐DIV
提问于 2015-06-14 06:07:28
如何在高度动态变化的表单元格中对元素( 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
Stack Overflow用户
发布于 2015-06-14 06:19:09
您只需“清除”应用于img的float
.bottom{
clear: both;
}HTML：
<div class="bottom">bottom text</div>Stack Overflow用户
发布于 2015-06-14 06: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
- 给
- -
td-content
- Included css类一个id
- 请删除后面的表格边框。
Stack Overflow用户
发布于 2015-06-14 06:32:57
您尝试做的事情不能通过设置垂直对齐来完成。你将不得不用正常的方式去做。
有两个分区，一个用于左侧，另一个用于右侧。左分割将有文本(顶部和底部)，右分割将包含图像。现在因为图像会调整高度，所以保持它不变(即静态)，但将左分割设为绝对，以匹配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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30824046
复制相关文章
相似问题
腾讯云开发者
