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

您可以在CSS容易達到預期的效果只如果您修改HTML咯：

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

注：有箭頭的div內不換行空格（NBSP），但它不是由代碼美化所示。

現在你可以應用這樣的CSS：

.selected { 
    width: 150px; 
} 

.selected .text {} 

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

Answer 2

從看看你在做什麼，它在我看來，你可能會更好，只是使用表然後一個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寬度 - 如果你決定改變到200 22，copyCol將擴展到200 - 22

Answer 3

爲什麼要使用一個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; }