将放置在其他元素之后的 SPAN 扩展到其容器的右边框答案

【问题标题】：Extend a SPAN, placed after other elements, to right border of its container将放置在其他元素之后的 SPAN 扩展到其容器的右边框
【发布时间】：2013-08-08 10:25:58
【问题描述】：

我有一张有 2 列的表格。在每一个中都存在一个简单的文本和另一个包含在 SPAN 中的句子。表格列具有固定宽度，显然文本是完全随机的长度。我想将跨度宽度“扩展”到单元格表的右边距。

<table>
  <tr>
      <td>Text 1 <span>other text 1</span></td>
      <td>Text 2 <span>other text 2</span></td>
  </tr>
</table>

和css规则：

td
{
    border:solid 1px black;
    padding:5px;
    width:200px;
}

span
{
    border-bottom:dotted 1px red;
}

这里有一个 JSFiddle Example。

如您所见，SPAN 下的红色虚线边框仅在文本下...我想将其扩展到每个单元格的右边距，因此我正在寻找一种方法来从其初始位置扩展跨度长度（依赖于前面的黑色文本）到容器的右边距。

在某些方面有可能吗？

【问题讨论】：

标签： html css

【解决方案1】：

spans 是内联元素。要做你想做的事，你需要把它变成一个块元素。此时，您需要使用inline-block 和宽度或块和浮动。

您可以使用 JS 来执行此操作：

$(document).ready(function() {
  var containerWidth = $('table td').width();
  var textWidth = $('span:first-child').width();
  var newWidth = containerWidth - textWidth;
  $('span.second').css('width',newWidth);
});

http://codepen.io/anon/pen/EyJFA

【讨论】：

不幸的是不是我需要的......正如你所说，第一句话可以是任意长......并且SPAN / DIV内容不应该在另一行继续，而只是更短...... ..
如果你想的话，有一种方法可以用 JS 来做到这一点 - 基本上得到容器的宽度，第一个跨度的宽度，然后减去差值并将该宽度应用于第二个。
对不起... :-( 但是，这又不是我正在寻找的解决方案...。我刚刚更新了我的JSFiddle 以显示我需要的内容。显然这个解决方案是静态的，不是自适应的，但最终的样子是我需要的。是否可以通过这种方式自动获取？谢谢。
我已经更新了我的以包含您需要的 JS。使用jQuery each 遍历每个容器并申请。

【解决方案2】：

将span 更改为div，因为span 是内联元素，而div 是块元素。

HTML：

<table>
  <tr>
      <td>Text 1 <div class="try">Other text 1</div></td>
      <td>Text 2 <div class="try"></div></td>
  </tr>
</table>

CSS：

table 
{ 
    border-collapse:collapse;
}
td
{
    border:solid 1px black;
    padding:5px;
    width:200px;
}
.try
{
    border-bottom:dotted 1px red;
    width: 150px;
    height: 15px;
    float: right;
}

Fiddle Link

【讨论】：