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>

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

如果视口宽度变窄（或者第二个跨度中的文本变得更长），则第二个跨度倾向于占据所有视口宽度，并且继续保持在第一个跨度之下。

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

有没有办法实现它？

Answer 1

也许如果你向第二个跨度添加最大宽度，使得样式显示如下：

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

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

PS，自动换行确保没有任何单词悬而未决（如果你碰巧有一个很长的单词）。

Answer 2

显然，将white-space: nowrap;添加到容器 div 并white-space: normal;添加到第二个 span ，一切正常，请参阅http://jsfiddle.net/paolobenve/gh577vg3/7/

对齐两个内联块，使它们保持在同一条线上

2 个答案: