两个块级元素 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;
}

Fiddle


更新

如果您不想在 table 中添加额外的单元格,您可以在单元格内创建一个内部 div,用 display:table; 属性 显示它, 然后用 display:table-cell; 属性.

显示 spanimg

Fiddle

我在<span>元素前面添加了<i>元素,并给<i>元素一个float: right;<span>元素截断样式.

现在工作正常!