L'obtention d'un élément span remplir l'espace dans un div

Je vais essayer d'avoir quelque chose comme ceci:

|--------------largeur fixe---------------| 
Title1 .......................... valeur1 
Titre2 ................... une autre valeur 
Un autre titre ........ encore une autre valeur

Voici mon exemple de code html code:

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

Et voici mon 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;
}

Il est possible de rendre span "centre" développer pour combler l'espace entre les deux autres éléments span?

Code sur jsfiddle: http://jsfiddle.net/XqHPh/

Merci!

Vous souhaitez créer et de développer un span pour cela?
Je pense qu'il pourrait vouloir une ligne de points...

OriginalL'auteur Mithenks | 2013-06-12

  1. 8

    Si vous réorganisez votre HTML, vous pouvez obtenir une solution simple:

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

    Place les deux flottaient éléments à l'avance de la .center élément. Le .center élément sera régulièrement du contenu de flux et l'enrouler autour de la gauche et la droite de contenu.

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

    Lorsque vous flotter un élément, le type d'affichage calcule à bloc, donc pas besoin de le déclarer.

    Aussi, pour .center, si vous ajoutez overflow: auto, vous contraindre le bloc de sorte qu'il ne s'étend pas au-delà des bords de la flottait éléments. En conséquence, votre fond frontière ne pas souligner le titre et la valeur du texte.

    Enfin, vous pouvez ajouter position: relative et déplacer le .center de quelques pixels pour aligner la frontière de plus près à la ligne de base du texte.

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

    +1 Bien expliquées solution.
    Parfait! Merci!!!!

    OriginalL'auteur Marc Audet

  2. 6

    pour cela, vous devez modifier la structure html comme ceci

    html

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

    et voici le css pour .center span

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

    jsFiddle Fichier

    Que c'est bon. Depuis le .center élément, c'est juste pour l'effet visuel, il n'a pas d'importance du point de vue sémantique où il apparaît, de sorte que le repositionnement est un bon appel.
    Qu'en est display: inline-block?
    Inline block shrink-to-fit de son contenu, de sorte qu'il prendra plus de travail à faire remplir l'espace entre la gauche et la droite des éléments.

    OriginalL'auteur Roy Sonasish