html - 两个 block 级元素 1 个固定宽度 1 个在表格内拉伸(stretch)

Question

我有一个包含多列的表格。在其中一列行中，我想添加 2 个彼此相邻的元素。一个文本元素和一个图标。图标有一个固定的，文本元素需要是动态的，并且当列不能再拉伸(stretch)时必须用...截断。

这是 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 充满错误。

Answer 1

正如评论中所说，如果您允许文本和图像保留在相邻单元格中，您可以尝试以下操作。

<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

更新

如果你不想在表格中添加额外的单元格，你可以在单元格内创建一个内部div，用display:table;属性显示它，然后使用 display:table-cell; 属性显示 span 和 img。

Fiddle