css - 对齐两个内联 block ，使它们保持在同一行

Question

我遇到了类似 http://jsfiddle.net/paolobenve/gh577vg3/6/ 的情况:

<div style="width: 100%;border: 3px solid #73AD21;">Container div<br>
  <span style="display: inline-block;
           position:relative;
           border:1px solid green;
           width: 1em;">
    T
  </span>
  <span style="display: inline-block;position:relative;border:1px solid green;">
     This asdfa sdf asdfa sdfa sdfa da da asd asdasdf adfa asfd
     asd s sd asd fasdf asdf asd asdf asd asd asd sdsdf sdsdf asd
     asd asd sdsdf sdsdf asd asd asd sdsdf sd sa
  </span>
</div>  

两个连续的内联 block ，第一个具有固定宽度，第二个跨越剩余空间。

如果视口(viewport)宽度变窄(或者如果第二个跨度中的文本变长)，第二个跨度往往会占据所有视口(viewport)宽度，并因此保持在第一个跨度下方。

我希望第二个跨度始终保持在第一个跨度的右侧，与视口(viewport)宽度或文本长度无关。

有什么办法可以实现吗？

Answer 1

也许如果您将最大宽度添加到第二个跨度，则样式如下所示:

span {
  display: inline-block;
  position:relative;
  border: 1px solid green;
  max-width: 50%;
  word-wrap: break-word;
}

最大宽度将确保第二个跨度不会超出给定的数字。使用百分比使其更具动态性/响应性，但您也可以使用 px。您还可以向第一个跨度添加一个最大宽度，以便它们都有限制。

PS，自动换行确保没有单词超出范围(如果您碰巧有一个很长的单词)。