Float div, заполняющий все пустое пространство коробки

Question

У меня есть такие HTML и CSS.

    <div class="selected">
        <div class="text">First</div>
        <div class="arrow">&nbsp;</div>
    </div>

    .selected { width: 150px; }

    .selected .text { background: url(dropdown_text.png);  float: left; }
    .selected .arrow { background: url(dropdown_arrow.png); width:22px; float: right; }

Мне нужно указать ".text" шириной 150px - 22px. Заполните все пустым между двумя поплавками. Я сделал это с JQuery, но я думаю, что это не правильный путь.

        $('.selected .text').each(function(i, n) {
            var ctrlwidth = $(n).parents('.selected').width();
            var arrowidth = $(n).parent().find('.arrow').width();

            $(n).width(ctrlwidth - arrowidth);
        });

Answer 1

Зачем использовать div только для добавления отдельной фоновой стрелки?

<div class="selected with-arrow">
  <div class="text"></div>
</div>

.with-arrow .text { background: url(dropdown_text.png); }
.with-arrow { background: url(dropdown_arrow.png); padding-left:22px; }

Answer 2

Вы можете легко достичь желаемого эффекта только в css, если немного изменить html:

<div class="selected">
<div class="arrow">&nbsp;</div>
    <div class="text">First</div>
</div>

Примечание: внутри стрелки div есть неразрывный пробел (nbsp), но он не отображается в коде beautifier.

Теперь вы можете применить CSS следующим образом:

.selected { 
    width: 150px; 
}

.selected .text {}

.selected .arrow {
    float:right;
    width:22px;
}

Answer 3

Судя по тому, что вы делаете, мне кажется, что вам лучше использовать таблицу, а не div.

Имейте в виду, я предполагаю, что ваши текстовые элементы будут отображаться в виде вертикального списка, а затем вы бы закодировали его как таковой.

<style>

#list
{
  width:150px;
  padding:0px; /*set this to what ever you want*/
}

td.arrowCol
{
  width:22px
}

td.arrowCol img
{
   float:right;
}

</style>

<table id="list" >
    <tr>
       <td id="copyCol" >
          first
       </td>
       <td id="arrowCol" >
          <img src="arrow.gif" />
       </td>
    </tr>
</table>

Столбец copyCol автоматически будет иметь ширину 150 - 22. Если вы решите изменить значение на 200, copyCol будет масштабироваться до 200 - 22.