コンテナdivのCSSと次の行へのフォール

Question

私はデザイナーというよりもプログラマーであり、テーブルを使用するのではなく<div>を受け入れようとしていますが、行き詰まっています。

これが私がやろうとしていることです。調査ページを設定しています。各質問のテキストを青いdivの上部に配置し、長すぎる場合は折り返したいです。コンテナdivの右上隅にすべての赤いdivが並ぶようにします。

レイアウトhttp://img528.imageshack.us/img528/4330/divsforsurveyop2 jpg

これが私が始めたものです。フレームの幅が420ピクセル以上であれば問題なく動作します。次に、赤いdivは次の行にスキップします。間違ったアプローチをした可能性があると思います。おそらく、物事を右に浮かせるべきでしょうか？

.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

これが私がやることだ：

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

cssを使用：

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

PSパディング値には、ゼロでない限り、常に単位が必要です。

Answer 2

赤いコンテナ以外はフロートせず、右にフロートします。赤いコンテナのHTMLが青いコンテナのHTMLの前に配置されていることを確認してください。青いコンテナでは静的な幅を維持し、緑のコンテナではclear：bothを維持します。

Answer 3

bluecontainerではclear：bothを使用しないでください。両方の要素（左と右）をクリアするからです。 redcontainerを右にフロートさせる必要があります。

Answer 4

<！> quot; clear：both <！> quot;青いdivに。それが問題の原因だと思います。

http://www.barelyfitz.com/screencast/をご覧ください。 html-training / css / positioning / には便利なデモンストレーションがありました。

Answer 5

ここではほとんどテストしていませんが、考えます、<！> quot; clear：both; <！> quot; <！> quot; float：left <！> quot;の代わりに.greencontainerで。 <！> quot; clear：both <！> quot;も削除します。 .bluecontainerから

詳細は、 http://www.quirksmode.org/css/clearingをご覧ください。 html

Answer 6

緑色のコンテナは、それが含まれているdivなので、フロートする必要はないと思います。さらに、<！> quot; clear：both <！> quot;ステートメントは、同じ緑のコンテナに複数の青/赤のdivを配置する場合にのみ必要になります。

試用

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

また、青いコンテナに右マージンを追加するか、赤いコンテナに左マージンを追加して、周囲ではなくdiv内のスペースに関連するパディングを使用するのではなく、それらの間のスペースを一定にする必要がある場合があります