CSS per div container e caduta alla riga successiva

Question

Sono più un programmatore che un designer e sto cercando di abbracciare <div> s piuttosto che usare le tabelle ma mi sto bloccando.

Ecco cosa sto cercando di fare. Sto impostando una pagina del sondaggio. Voglio che il testo di ogni domanda si trovi nella parte superiore del div blu, e avvolga se è troppo lungo. Voglio che tutti i div rossi si allineino nell'angolo in alto a destra del div contenitore.

Layout http://img528.imageshack.us/img528/4330/divsforsurveyop2. jpg

Ecco quello che ho iniziato, funziona benché la cornice sia larga più di 420 pixel. Quindi il div rosso salta alla riga successiva. Penso che avrei potuto affrontarlo nel modo sbagliato, forse dovrei fluttuare le cose a destra?

.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

Ecco cosa farei:

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

con css:

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

I valori di riempimento PS devono sempre avere unità, a meno che non siano zero.

Answer 2

Non fare galleggiare nient'altro che il contenitore rosso e farlo galleggiare a destra. Assicurarsi che l'HTML per i contenitori rossi sia posizionato prima dell'HTML per i contenitori blu. Mantieni la larghezza statica sul contenitore blu e mantieni il chiaro: entrambi sul contenitore verde.

Answer 3

non usare clear: entrambi sul tuo bluecontainer perché cancellerà qualsiasi elemento su entrambi i lati (sinistro e destro). e dovresti far fluttuare il redcontainer a destra.

Answer 4

Hai " clear: entrambi " sul div blu. Questo è ciò che penso causi il problema.

Guarda http://www.barelyfitz.com/screencast/ html-training / css / posizionamento / che ha avuto alcune dimostrazioni utili.

Answer 5

Pochissimi test qui, ma io penso vorrai " clear: both; " su .greencontainer anziché " float: left " ;. Rimuovi anche & Quot; clear: entrambi & Quot; da .bluecontainer

Ulteriori informazioni su: http://www.quirksmode.org/css/clearing. html

Answer 6

Non penso che sia necessario far galleggiare il contenitore verde in quanto è il div contenente. Inoltre, un & Quot; clear: entrambi & Quot; dichiarazione sarebbe necessaria solo se si inseriscono più div blu / rossi nello stesso contenitore verde.

Prova

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

Potrebbe essere necessario aggiungere un margine destro al contenitore blu o un margine sinistro al contenitore rosso per ottenere una spaziatura coerente tra di loro piuttosto che utilizzare un'imbottitura che si riferisce alla spaziatura all'interno del div non attorno ad esso