Pierwsze element rozpiętość wypełnić przestrzeń w div

Question

Staram się mieć coś takiego:

 
|--------------fixed width---------------| 
Title1 .......................... value1 
Title2 ................... another value 
Another title ........ yet another value 

Oto mój przykład html code:

<div class="container"> 
    <span class="left">Title</span> 
    <span class="center">&nbsp;</span> 
    <span class="right">value</span> 
</div> 

I tu mój css:

.center { 
    text-align: center; 
    border-bottom: 1px dotted blue; 
    display: inline-block; 
    outerWidth: 100%; 
} 

.right { 
    display: block; 
    border: 1px dotted red; 
    float: right; 
} 

.left { 
    display: block; 
    text-align: right; 
    border: 1px dotted red; 
    margin-right: 0px; 
    float: left; 
} 

.container { 
    width: 200px; 
    border: 1px dotted red; 
    padding: 5px; 
} 

Czy możliwe jest rozszerzenie "środka" przęsła, aby wypełnić przestrzeń między pozostałymi dwoma elementami przęsła?

kodeks jsfiddle: http://jsfiddle.net/XqHPh/

Dziękujemy!

Answer 1

Jeśli zmienić kolejność HTML, można uzyskać proste rozwiązanie:

<div class="container"> 
    <span class="left">Title</span> 
    <span class="right">value</span> 
    <span class="center">&nbsp;</span> 
</div> 

Umieść dwa elementów pływających przed elementu .center. Element .center będzie w regularnym przepływie treści i owija się wokół lewej i prawej zawartości.

CSS:

.center { 
    display: block; 
    border-bottom: 1px dotted blue; 
    overflow: auto; 
    position: relative; 
    top: -4px; 
} 

.right { 
    float: right; 
    margin-left: 10px; 
} 

.left { 
    float: left; 
    margin-right: 10px; 
} 

.container { 
    width: 200px; 
    border: 1px dotted red; 
    padding: 5px; 
} 

Kiedy unosić element, typ wyświetlacza oblicza zablokować, więc nie ma potrzeby, aby go zgłosić.

Ponadto, dla .center, jeśli dodasz overflow: auto, ograniczysz blok tak, aby nie wykraczał poza krawędzie elementów pływających. W rezultacie twoja dolna krawędź nie podkreśla tekstu tytułu i wartości.

Na koniec można dodać position: relative i przesunąć o kilka pikseli w celu wyrównania granicy bliżej linii bazowej tekstu.

Fiddle: http://jsfiddle.net/audetwebdesign/DPFYD/

Answer 2

do tego trzeba zmienić strukturę HTML, jak ten

html

<div class="container"> 
    <span class="left">Title</span> 
    <span class="right">value</span> 
    <span class="center">&nbsp;</span> 
</div> 

i tutaj jest css dla .center span

.center { 
    text-align: center; 
    border-bottom: 1px dotted blue; 
    display:block; 
} 

jsFiddle File