CSS pour le conteneur divs et tomber à la ligne suivante

Question

Je suis plus un programmeur qu'un concepteur, et j'essaie d'adopter <div> s plutôt que d'utiliser des tableaux, mais je reste bloqué.

Voici ce que j'essaie de faire. Je prépare une page de sondage. Je veux que le texte de chaque question soit placé au sommet de la division bleue et soit bouclé si c'est trop long. Je veux que tous les divs rouges soient alignés dans le coin supérieur droit du conteneur div.

Mise en page http://img528.imageshack.us/img528/4330/divsforsurveyop2. jpg

Voici ce que j'ai commencé avec, cela fonctionne bien tant que le cadre a une largeur supérieure à 420 pixels. Ensuite, la division rouge passe à la ligne suivante. Je pense que j’ai peut-être mal abordé la question, peut-être que je devrais laisser aller des choses à droite?

.greencontainer{
    width:100%;
    spacing : 10 10 10 10 ;
    float: left; 
}

.redcontainer{ 
    float: left; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: center; 
}

.bluecontainer{ 
    clear: both;
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
    font-family: sans-serif; 
    text-align: left; 
}

Answer 1

Voici ce que je ferais:

<div class="greencontainer">
  <div class="redcontainer">
    <input type="checkbox" />
  </div>
  <div class="bluecontainer">
    <label>Text about this checkbox...</label>
  </div>
</div>

avec css:

.greencontainer{
   float:left;
   clear:left;
   width:100%;
 }
 .redcontainer{
   float:right;
   width:20px;
 }
 .bluecontainer{
   margin-right:20px;
 }

Les valeurs de remplissage PS doivent toujours avoir des unités, sauf si elles sont nulles.

Answer 2

Ne faites pas flotter autre chose que le conteneur rouge et faites-le flotter à droite. Assurez-vous que le code HTML pour les conteneurs rouges est placé avant le code HTML pour les conteneurs bleus. Conservez la largeur statique sur le conteneur bleu et votre clair: les deux sur le conteneur vert.

Answer 3

n’utilisez pas clear: les deux sur votre conteneur bleu car il effacera tous les éléments des deux côtés (gauche et droite). et vous devriez faire flotter le conteneur rouge à droite.

Answer 4

Vous avez " effacer: les deux " sur le div bleu. C’est ce qui, je pense, pose le problème.

Regardez http://www.barelyfitz.com/screencast/ html-training / css / positionnement / , avec quelques démonstrations pratiques.

Answer 5

Très peu de tests ici, mais je pense que vous souhaiterez & "clear: both; &"; sur .greencontainer au lieu de & "; float: left &"; Supprimez également & Quot; clear: both & Quot; de .bluecontainer

Voir plus d’informations sur: http://www.quirksmode.org/css/clearing. html

Answer 6

Je ne pense pas que vous ayez besoin de faire flotter le conteneur vert du tout, car il s'agit du div conteneur. De plus, un & Quot; clear: both & Quot; Cette instruction n’est nécessaire que si vous placez plusieurs div bleu / rouge dans le même conteneur vert.

Essayez

.greencontainer{
    width:100%;
spacing : 10 10 10 10 ;

}

.bluecontainer{ 
    float: left; 
    width: 400px; 
    padding: 2 2 2 10;
    font-size: 11px;
font-family: sans-serif; 
    text-align: left; 
}
.redcontainer{ 
    float: right; 
    width: 20px;
    padding: 2 0 2 0;
    font-size: 11px;
font-family: sans-serif; 
    text-align: center; 
}

Vous devrez peut-être également ajouter une marge droite au conteneur bleu ou une marge gauche au conteneur rouge pour obtenir un espacement uniforme entre eux, plutôt que d'utiliser un remplissage qui correspond à l'espacement à l'intérieur du div ne l'entourant pas