CSS para divs de contêiner e caindo para a próxima linha

Question

Estou mais de um programador do que um designer, e eu estou tentando abraçar <div>s em vez de usar tabelas, mas estou ficando preso.

Aqui está o que estou tentando fazer. Estou configurando uma página de pesquisa. Eu quero o texto de cada questão para sentar-se no topo da div azul, e envolvê-se é muito longo. Quero que todos os divs vermelhas para alinhar no canto superior direito da div container.

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

Aqui está o que eu comecei com, ele funciona bem, desde que o quadro é mais de 420 pixels de largura. Em seguida, a div vermelha avança para a próxima linha. Eu acho que pode ter abordado errado, talvez eu deveria estar flutuando coisas para a direita?

.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

Aqui está o que eu faria:

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

com css:

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

Os valores PS Enchimento deve sempre ter unidades, a menos que sejam zero.

Answer 2

não flutuam nada, mas o recipiente vermelho e bóia-lo para a direita. Verifique se o HTML para os recipientes vermelhos é colocado antes do HTML para os recipientes azuis. Mantenha a largura estática no recipiente azul, e manter a sua clara:. Tanto no recipiente verde

Answer 3

não use clear: both no seu bluecontainer porque vai limpar qualquer elemento em ambos os lados (esquerdo e direito). e você deve fazer o flutuador redcontainer para a direita.

Answer 4

Você "clear: both" na div azul. Isso é o que eu acho que causa o problema.

http://www.barelyfitz.com/screencast/ html-formação / css / posicionamento / que teve algumas demonstrações úteis.

Answer 5

Muito pouco testando aqui, mas eu pensar você vai querer "clear: both;" em .greencontainer em vez de "float: left". Também remova "clear: both" de .bluecontainer

Veja mais informações em: http://www.quirksmode.org/css/clearing. html

Answer 6

Eu não acho que você precisa flutuar no recipiente verde em tudo, pois é a div que contém. Além disso, um "clear: both" só seria necessária declaração se colocando várias azul / divs vermelhas no mesmo recipiente verde

.

Tente

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

Você também pode precisar adicionar uma margem direita ao recipiente azul ou deixou margem para o recipiente vermelho para pegar espaçamento consistente entre eles ao invés de usar enchimento que se relaciona com o espaçamento dentro da div não em torno dele