Float div, die alle leeren Raum der Box füllt

Question

Ich habe solche HTML und 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; } 

Ich muss ".text" eine Breite einfügen, die 150px - 22px ist. Füllen Sie alle zwischen zwei Floats leer. Ich habe es mit jQuery gemacht, aber ich denke, es ist nicht der richtige Weg.

Answer 1

Sie die leicht in CSS gewünschte Wirkung erzielen kann nur wenn Sie die hTML leicht ändern:

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

Hinweis: es gibt ein Geschütztes Leerzeichen (nbsp) im Innern des Pfeils div, aber es nicht durch den Code beautifier gezeigt.

Jetzt können Sie die CSS wie folgt anwenden:

.selected { 
    width: 150px; 
} 

.selected .text {} 

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

Answer 2

Von den Blicken, die Sie tun, sieht es für mich aus, dass Sie besser dran sein könnten, nur mit einer Tabelle dann ein div.

Wohlgemerkt, ich nehme an, dass Ihre Textelemente als eine vertikale Liste angezeigt werden, dann würden Sie es so codieren.

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

Die copyCol Spalte die Breite automatisch 150 haben wird - 22. Wenn Sie auf 200 ändern entscheiden, skalieren copyCol auf 200 - 22.

Answer 3

Warum nur ein div verwenden einen separaten Hintergrund Pfeil hinzufügen?

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