les rh de la ligne entre les deux divs

Qui suit est mon violon dans laquelle je suis en train de donner des rh de la ligne entre les deux floating divs . Veuillez me faire savoir comment puis-je donner un réactif de ligne entre les deux divs flottantes.

http://jsfiddle.net/NH5Lc/5/

<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
    <hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>
<br/>
<div style="display:inline-block; float: left;">Calories</div>
<div style="inline-block">
    <hr class="between" />
</div>
<div style="display:inline-block; float: right;">20</div>

vous pouvez le faire avec une frontière au lieu d'une balise de ressources humaines. De l'enregistrement, il serait préférable d'utiliser un fichier css au lieu des styles en ligne
double possible de Comment puis-je remplir l'espace entre la gauche et la droite flotter sans faire le flotteur droit d'envelopper?
J'ai fait la ligne de style pour le violon seul. Les questions sont les la troisième div va toujours à la ligne suivante et les marges de la rh lignes ne sont pas workning
ma question est différent et aussi que la question n'est pas répondue.
N'est-ce pas un élément de la table de la solution?

InformationsquelleAutor user3027531 | 2014-01-25

Vous pouvez utiliser flex trop. jsFiddle Démo en Live

CSS:

    .between {
        border: 3px dotted #0099CC;
        margin-left:10px;
        margin-right:10px;
    }
    .parent
    { 
        display:-moz-box; /* Firefox */
        display:-webkit-box; /* Safari and Chrome */
        display:-ms-flexbox; /* Internet Explorer 10 */
        display:box;
        width:100%;
    }
    .child2
    {
        -moz-box-flex:5.0; /* Firefox */
        -webkit-box-flex:5.0; /* Safari and Chrome */
        -ms-flex:9.0; /* Internet Explorer 10 */
        box-flex:9.0;
    }

HTML:

    <div class='parent'>
        <div class='child1'>Calories</div>
        <div class='child2'> <hr class="between" /></div>
        <div class='child3'>20</div>
    </div>
    <div class='parent'>
        <div class='child1'>Calories as dasd as dasd</div>
        <div class='child2'> <hr class="between" /></div>
        <div class='child3'>20</div>
    </div>

Que faire si le texte est la quantité Totale de Glucides, il ne sera pas agréable à regarder alors. Dans votre violon la ligne n'est pas dynamiquement serrant comme pour le texte
Réponse de violons et mis à jour. vérifier de nouveau.

InformationsquelleAutor Siamak A.Motlagh

1

coller entre votre classe
.entre {
```
width: 500px;
float: left;
border-right: 1px solid gray;
```
}

InformationsquelleAutor Ferrakkem Bhuiyan
0

<div style="border-top:1px solid black; width:100%;"></div> de le faire. Comme Gert B. dit, vous devez vraiment être à l'aide d'un fichier lié plutôt que des styles en ligne si. Dans ce cas, vous auriez dans votre fichier CSS:
```
.line{
     border-top:1px solid black;
     width:100%
}
```
Ensuite dans votre balisage:
```
<div class="line"></div>
```
- pouvez vous de bien vouloir partager notre mise à jour de violon
InformationsquelleAutor ElendilTheTall

il semble que vous pourriez utiliser un <table> ou au moins une liste <ul> pour ce que vous essayez de faire .

Avec une liste, vous pouvez utiliser text-align, le flotteur et le pseudo-élément .
http://codepen.io/gc-nomade/pen/Bmhqc

ul, li {
  padding:0;
  margin:0;
  list-style-type:none;
  text-align:right;
}
li em {
  float:left;
}
li em:after {
  content:'';
  border-bottom:dotted;
  width:2000px;
  margin-right:-2000px;/* reduce space needed to 0 */
  display:inline-block;
  vertical-align:middle;
}
li, span {
  background:white;
  overflow:hidden; /* hide pseudo line overflow */
}

<ul>
  <li><em>calorie</em><span>20</span></li>
  <li><em>calorie</em><span>20</span></li>
  <li><em>calorie</em><span>20</span></li>
  <li><em>calorie</em><span>20</span></li>
</ul>

Je suis en train de l'adapter afin de largeur 2000px ne fonctionne pas pour moi
avez-vous essayé ? et compris le but de la marge négative ?

InformationsquelleAutor G-Cyr

Html

   <div id="outer">
    <div id="left">Calories</div>
    <div id="middle">
        <hr class="between" />
    </div>
    <div id="right">20</div>
</div>

<br>
    <br>
    <div id="outer">
    <div id="left">Calories</div>
    <div id="middle">
        <hr class="between" />
    </div>
    <div id="right">20</div>
</div>

CSS

   #outer {
    display:block;
    width: 100%;
}
#left {
    width: 100px;  
    float: left;
    text-align:center;
}
#right {
    width: 200px;

    float: right;
    text-align:center;
}
#middle {

    float: left;
}
.between {
    border: 3px dotted #0099CC;
    width:200px;
    margin-left:10px;
    margin-right:10px;
}

De sortie:

les rh de la ligne entre les deux divs

Travail de violon

InformationsquelleAutor Amarnath Balasubramanian

Vous devez vous connecter pour publier un commentaire.