Comment faire flotter un span dans un div?

Je suis en train d'apprendre comment utiliser le CSS sans l'aide de Bootstrap.

J'ai le texte suivant: (peut être consultée ici: http://plnkr.co/edit/FTCft1YOfQ4xy7FKWEHE?p=preview)

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
</div>

<div class="block">
  <span class="pull-left">Carl</span>
  <span class="pull-right">$4.81</span>
</div>

<div class="block">
  <span class="pull-left">Steve</span>
  <span class="pull-right">$0.34</span>
</div>

et le CSS...

.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
}

Si j'ai été en utilisant Bootstrap, j'ai pu atteindre l'effet désiré, en mettant mon code html dans un container div et au lieu d'utiliser ma classe personnalisée de block, ajouter la classe btn et btn-block.

Je veux avoir les noms aligner verticalement sur la gauche et les prix sont alignés verticalement sur la droite. Ce qui me manque?

Du genre:

George                                     $23.20
Carl                                        $4.81
Steve                                       $0.34

S'il vous plaît ne pas mentionner les tableaux, comme je l'ai dit, j'ai pu utiliser bootstrap et envelopper le html ci-dessus dans div.container, et ensuite utiliser button.btn.btn-block à la place de mon div.block pour obtenir exactement le même effet. Merci.

Mise à jour 1:

OK, je ne pensais pas qu'il y ait plus de peut-être une ou deux solutions, mais il est tout à fait un peu. Quelqu'un peut m'expliquer les avantages/inconvénients de chaque solution? Je suis vraiment à une perte ici.

Solution #1:

Ajouter un nouvel élément div:

<div class="block">
  <span class="pull-left">George</span>
  <span class="pull-right">$23.20</span>
  <div style='clear:both'></div>
</div>

Solution #2:

Ajouter clear:both; overflow:auto; à la block classe par thgaskel

Solution #3:

Celui-ci semble de créer des marges entre les blocs.

Changement display:block à display:inline-block pour la block classe.

Solution #4:

Ajouter float:left à la block classe.

Solution n ° 5:

Découvert, pendant que de déconner. Créer un nouveau sélecteur:

.block:after {
  content: ":" /* <--- at a complete loss why this works */ 
}

Solution #6:

Découvert celui de la lecture cette page.

.block:after {
  content:"";
  display: table;
  clear: both;
}

Je me sens assez débordé et ne sais pas laquelle choisir. Merci.

OriginalL'auteur JP Richardson | 2013-07-30

4

Au lieu de display: block;, utiliser le dessous des css
```
.block {
display: inline-block;  //change like this
background-color: #87CEEB;
width: 100%;
}
```
Mise à jour:
Depuis, l'écart est distrubing, de mieux utiliser les
```
.block {
    display: block;
    float: left;
    background-color: #87CEEB;
    width: 100%;
}
```
Actaully inline-block a tendance à laisser de l'espace qui peut être empêché de bien des façons.
- Lutte contre l'Espace Entre Inline Éléments de Bloc
- display inline-block marge supplémentaire
Même cela résout votre problème, vérifiez jsfiddle

Mais le btn-block dans le Bootstrap a un display: block?
Cela fonctionne, mais je ne comprends pas pourquoi cela met une marge entre les blocs tandis que les autres solutions n'ont pas?
Je ne pense pas que les avantages et les inconvénients de l'application de la feuille de style css. La seule chose que je voudrais dire, il ne devrait pas affecter d'autres styles dans votre html.

OriginalL'auteur Praveen

Proche de vous dans votre approche, la seule chose que vous aurez besoin pour faire de ce travail est de nettoyer le flotteur après avoir été appliqué à la balise span.

Ont un oeil à la façon clear fonctionne en HTML/CSS : http://www.w3schools.com/cssref/pr_class_clear.asp

Votre code devrait ressembler à ceci:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div class="block">
      <span class="pull-left">George</span>
      <span class="pull-right">$23.20</span>
      <div style='clear:both'></div>
    </div>

  <div class="block">
    <span class="pull-left">Carl</span>
    <span class="pull-right">$4.81</span>
    <div style='clear:both'></div>
  </div>

  <div class="block">
    <span class="pull-left">Steve</span>
    <span class="pull-right">$0.34</span>
    <div style='clear:both'></div>
  </div>


  </body>

</html>

lol ok, noté 🙂
Vous pourriez tout aussi bien s'appliquer clear:both; overflow:auto; à la .block classe.
Jeeze, sooo beaucoup de solutions qui semblent fonctionner... je ne sais vraiment pas les avantages/inconvénients de chacun.

OriginalL'auteur JanR

1

Ajouter float:left; à .block classe depuis que ses enfants sont flottante c'est pourquoi vous avez besoin pour faire flotter son parent div pour obtenir la totalité de la largeur
```
.block {
    display: block; /* since, div, I don't need this right ?*/
    background-color: #87CEEB;
    width: 100%;
    float:left;
}
```
bien, vous verrez la différence après l'ajout de balises.. 🙂

OriginalL'auteur Hushme

Vous devez vous connecter pour publier un commentaire.