css - 如何水平拉伸(stretch)空元素

Question

我正试图在 HTML + CSS 中实现这样的效果

_____________________[           Some Div             ]

____ 是一个border-bottom。它右边的 Div 不应该有边框。我希望这个边框尽可能地拉伸(stretch)，以便它们一起占据父级的宽度。我试图避免任何固定间距布局。

我尝试使用 width:100% 的表格:

<table style="width:100%"><tbody><tr>
    <td id="borderDiv"></td>
    <td id="contentDiv">Some Div</td>
</tr><?tbody></table>

额外的空间转到第二个 td 而不是第一个。我还尝试将内容 div float 到右侧:

<div>
    <div id="contentDiv" style="float:right">Some Div</div>
    <div id="borderDiv"></div>
</div>

但是带边框的 div 现在填满了父级的整个空间。无法找到将其限制在剩余空间的方法。

Answer 1

也许我误解了你的问题，我知道 HTML + CSS 纯粹主义者会因此而讨厌我，但你不能做以下事情吗:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td><nobr>my content</nobr></td>
  </tr>
</table>

如果第二列有您想要的特定宽度，您可以指定并删除 <nobr>标记并以如下内容结尾:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td style="width: 200px">my content</td>
  </tr>
</table>