3个跨越彼此对齐

Question

我有3个跨度。前两个包含图标（图片）16x16px。第三个跨度包含长文本。问题是，当文本太长时，它也出现在第二行，但是在行的开头......它需要对齐并在与第一行相同的位置开始。这3个跨度不能包装到任何div左右。有没有可能如何实现这一目标。查看图片，此处是示例页面spans example http://jsfiddle.net/P76Sg/

Answer 1

您可以使用浮动和溢出技巧获得您正在寻找的效果。在他们自己的<div>中包含两个图标并向左浮动。然后隐藏文本元素的溢出，它将始终清除图标，但占用剩余的可用宽度：

<强> HTML

<div class="cont">
    <div class="icons">
        <span><img /></span>
        <span><img /></span>
    </div>
    <div class="text">
SSSScontent 3 content 3 content 3 content 3 content 3 content 3 dfssssss
    </div>
</div>

<强> CSS

.cont{width:280px}
.icons{float:left}
.text{background-color:red; overflow:hidden}

JSFiddle

---

或采取不同的方法，并将跨度显示为表格单元格：

JSFiddle

Answer 2

正如* Vucko *建议的那样，我们可以使用display：table-cell。 或者我们可以使用<table>结构来创建。

Answer 3

尝试在第3个范围添加一些左边距：

margin-left:15px;

Answer 4

溶液

<div style="width:280px;">
    <span style="background-color:#333333; display: table-cell;">
        <img style = "width:16px; height=16px;"/>
    </span>

    <span style="background-color:#F111FF; display: table-cell;">
        <img style = "width:16px; height=16px;"/>
    </span>

    <span style="background-color:red; display: table-cell;">
SSSScontent 3 content 3 content 3 content 3 content 3 content 3 dfssssss
    </span>
</div>