Как растянуть пустой элемент по горизонтали

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>
    <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>

Answer 2

Пуристическая альтернатива решению Брайана, использующая свойства 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>

Answer 3

<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>