HTML: привязка чего-либо к правой стороне элемента

Question

У меня есть диапазон, который я хочу отрегулировать так, чтобы он был привязан к краю базовой таблицы. Я попытался заключить оба элемента в div, но я не могу придумать, как сделать так, чтобы div автоматически сжимался, чтобы иметь тот же размер, что и таблица, при правильном перемещении диапазона Идеи?

Я пытался использовать style="display: inline-block; float: left;", но это не работает, когда элемент span равен float: right, тогда он слишком сильно расширяет div.

Используется браузер IE7 и IE8 в режиме совместимости.

Answer 1

Решение может зависеть от того, для чего вы используете <span>. Насколько важно плавать <span>?

Помогает ли это?

<style type="text/css">
div.wrapper { float: left; text-align: right;}
span.caption { background-color: #9c9;}
</style>

и

<div class="wrapper">
 <span class="caption">caption</span>
 <table border="2">
  <tr><td>column 1</td><td>column 2</td></tr>
 </table>
 <span class="caption">caption</span>
</div>

Удостоверьтесь и clear все, что придет после оболочки.

Answer 2

Попробуйте:

<div class="wrapper">
<table>
...
</table>
<span class="caption">Here is a caption</span>
</div>

с:

div.wrapper { overflow: hidden; }
span.caption { float: right; }

Важна часть переполнения.

Технически вы можете использовать для этого дочерний элемент <caption> из <table>, но вы не можете стилизовать его с помощью CSS (в правом нижнем углу) в IE6-7.