css - 对齐两个内联块，以便它们保持在同一行上

我遇到类似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>

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

如果视口宽度变窄（或者第二个跨度中的文本变长），则第二个跨度会占据所有视口宽度，并因此保持在第一个跨度以下。

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

有办法做到吗？

最佳答案

也许，如果您向第二个跨度添加最大宽度，以使样式如下所示：

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

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

PS，自动换行确保没有单词悬空（如果您碰巧有很长的单词）。

关于css - 对齐两个内联块，以便它们保持在同一行上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38512277/