4

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

これが私がやろうとしていることです。アンケートページを開設しています。各質問のテキストを青い 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; 
}
4

6 に答える 6

2

赤いコンテナ以外は浮かせないで、右に浮かせてください。赤いコンテナのHTMLが青いコンテナのHTMLの前に配置されていることを確認してください。青いコンテナで静的な幅を維持し、緑色のコンテナで両方をクリアに保ちます。

于 2008-11-05T17:38:01.443 に答える
2

これが私がすることです：

<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 パディング値には、ゼロでない限り、常に単位が必要です。

于 2008-11-05T17:42:39.563 に答える
1

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

于 2008-11-05T17:37:28.870 に答える
0

緑のコンテナはdivを含んでいるので、フロートする必要はまったくないと思います。さらに、「clear：both」ステートメントは、同じ緑のコンテナに複数の青/赤のdivを配置する場合にのみ必要になります。

試す

.greencontainer {
    幅：100％;
間隔：10 10 10 10;

}

.bluecontainer {
    フロート：左;
    幅：400px;
    パディング：2 2 2 10;
    フォントサイズ：11px;
フォントファミリー：sans-serif;
    text-align：左;
}
.redcontainer {
    フロート：右;
    幅：20px;
    パディング：2 0 2 0;
    フォントサイズ：11px;
フォントファミリー：sans-serif;
    text-align：center;
}

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

于 2008-11-05T18:02:16.573 に答える
0

ここでのテストはほとんどありませんが、 「明確：両方」が必要になると思います。「float：left」の代わりに.greencontainerに。また、.bluecontainerから「clear：both」を削除します

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

于 2008-11-05T17:35:03.027 に答える
0

青いdivに「クリア：両方」があります。それが問題の原因だと思います。

いくつかの便利なデモンストレーションがあったhttp://www.barelyfitz.com/screencast/html-training/css/positioning/を見てください。

于 2008-11-05T17:40:40.113 に答える