Question

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

这是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

如评论中所述，如果您允许文字和图片保留在adiacent单元格中，则可以尝试以下操作。

<table>
    <tr>
        <td>Truncated text goes here</td>
        <td><img src="imageURL" /></td>
    </tr>
</table>

您可以使用vertical-align:top;样式中的td来对齐单元格顶部的文字。然后您可以使用以下设置图像宽度。

td>img {
    vertical-align:top;
    display:inline-block;
    width:80px;
}

Fiddle

的更新

如果您不想在表格中添加额外的单元格，可以在单元格内部创建内部div，使用display:table;属性显示它，然后同时显示{{1} {}}和span img属性。

Fiddle

Answer 2

我在元素前面添加了元素，并为元素提供了float: right;，并为元素提供了截断样式。

现在工作正常！

两个块级元件1固定宽度1伸展在桌子内

2 个答案: