Question

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

_____________________[           Some Div             ]

____是border-bottom。它右边的Div不应该有边框。我希望这个边框尽可能地伸展，这样它们就会占据父节点的宽度。我试图避免任何固定的间距布局。

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

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

额外的空间转到第二个td而不是第一个<div> <div id="contentDiv" style="float:right">Some Div</div> <div id="borderDiv"></div> </div>。我也试过将内容div浮动到右边：

{{1}}

但带边框的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>

Answer 2

<div>
     <div id="contentDiv" style="float:right; width:30%">Some Div</div>
     <div id="borderDiv" style="margin-right: 30%"></div>
</div>

浮动需要有一个宽度，这就是我接近它的方式。

这可能有用，但需要更多关于你如何处理高度的信息。如果它是固定的，例如只是让浮子更高一点。

<div>
     <div id="contentDiv" style="float:right;background:white;white-space:nowrap></div>
     <div id="borderDiv" style="border-bottom:1px solid black;"></div>
</div>

Answer 3

Brian的解决方案的纯粹替代品，使用CSS属性：

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

如何水平拉伸空元素

3 个答案: