两个块级元素 1 个固定宽度 1 个在内部拉伸 table
Two block level elements 1 fixed width 1 stretch inside table
我有一个包含多列的 table。在其中一列行中,我想添加 2 个彼此相邻的元素。一个文本元素和一个图标。图标有一个固定的,文本元素需要是动态的,并且当列不能再拉伸时必须用...截断。
这是HTML:
<table>
<tr>
<td>
</td>
<td>
<span>Truncated text goes here</span>
<i class="icn sprite icn-name></i>
</td>
<td>
</td>
</tr>
</table>
我该怎么做?使用 display: table;
会使 HTML 全部出错。
正如评论中所说,如果您允许文本和图像留在相邻单元格中,您可以尝试以下操作。
<table>
<tr>
<td>Truncated text goes here</td>
<td><img src="imageURL" /></td>
</tr>
</table>
您可以在 td
样式中使用 vertical-align:top;
来对齐单元格顶部的文本。然后您可以使用以下设置图像宽度。
td>img {
vertical-align:top;
display:inline-block;
width:80px;
}
更新
如果您不想在 table 中添加额外的单元格,您可以在单元格内创建一个内部 div
,用 display:table;
属性 显示它, 然后用 display:table-cell;
属性.
span
和 img
我在<span>
元素前面添加了<i>
元素,并给<i>
元素一个float: right;
和<span>
元素截断样式.
现在工作正常!