2

私はCSSを使って作業しており、divとcssを使用して入力フォームをフォーマットしようとしています。私は、CSS ルールを間違って使用していると確信しており、何が間違っているのかを理解しようとしています。この画像は、div ブロックをさまざまな色で示しています。これらの異なるカラー ブロックはそれぞれ、一意の ID を持つ div です。

色つきブロック http://www.ws7m.net/filechute/2012-07-25_10-53-13.png

私がやろうとしているのは、「国」ブロックを「メールコード」ブロックの右側に押し込むことです。上の画像では State には float:left があり、メール コードには float left があります。国を含む div に float left を追加すると、3 つすべてが紫色のブロック (丸い境界線) の外に飛び出します。

ジャンプ http://www.ws7m.net/filechute/2012-07-25_10-54-44.png

ブロック内の「float: lefts」の数に制限はありますか? ここにはかなりの量の CSS があります。これは、このフォーム上で自分の望むように調整しようとして失敗したためです。この紫色の領域に特化したものを投稿します。

これは、大きな紫色の囲みブロックです。

#applyMailInfoBlock
{
background: #D9A4DE;
margin-top: 15px;   
}

これは、「プロジェクトの郵送先住所」の下の丸い枠です。

#applyMailInfo
{
    padding: 5px 5px 5px 5px;
    margin-top: 2px;
    border: 1px solid black;
    border-radius: 8px;
}

次の 2 つは道路線用です。スペースを確保できるように、それらを div に分割しました。

#applyProjectaddress1
{
    background: #F2AAC7;    
    margin-top: 5px;
    width: 80%;
} 

#applyProjectaddress2
{
    background: #C97B9A;    
    margin-top: 5px;
    width: 80%;
}

市は独自のブロックを取得します。

#applyProjectcity
{
    background: #9C4B6B;    
    width: 80%;
}

さて、ここからフレイルが始まります。最初は、幅のある独自の小さな div として州、郵便番号、および国がありました。それぞれに float left を使用してみましたが、上の画像のようになりました。だから私が最後に試みたのは、applyProjectStateZipCountry と呼ばれるより大きな div でそれらを囲むことでした。アイデアは、より大きな div にいることで、それぞれのフロートが私が望むように機能する可能性があるということでした。まあ、それは役に立ちません。

#applyProjectStateZipCountry
{
    background: #E3E2AA;
    width: 90%;
}

#applyProjectstate
{
    float: left;
    background: #A4DEA8;    
    width: 40%;
}

#applyProjectmailcode
{
    float: left;
    background: #EDABED;    
    width: 20%;
}

#applyProjectcountry
{
    float: left;
    background: #B8E3AA;    
    width: 20%;
}

問題は、最後の「float: left;」を追加するときです。applyProjectcountry では、州、メールコード、および国が紫色の div から飛び出します。

私は何を間違っていますか?それらの div 内の div と float lefts に制限はありますか? 私は周りを検索してきましたが、フローティングする必要があるチュートリアルは、画像の周りにテキストをフローティングする方向に向けられているようです。

どんな助けでも大歓迎です。

4

4 に答える 4

3

次のようにフロートをクリアする必要があります。

<div style="clear: both;"></div>
于 2012-07-25T17:08:36.790 に答える
1

別のオプションは、フロートを囲む div にオーバーフロー スタイルを追加することです。これにより、div が必要なサイズに拡張されます。

#applyProjectStateZipCountry {
    background: #E3E2AA;
    overflow: hidden;
    width: 90%;
}
于 2012-07-25T17:54:09.060 に答える
0

#applyProjectcountry の後にフロート設定をリセットする必要があります。したがって、float を持つ最後の要素の後にこれを配置します。

<div style="clear:both;"></div>
于 2012-07-25T17:12:04.420 に答える
0

おそらくフロートをクリアしていません。

<div>
 <div class="left"></div>
<div class="left"></div>
<div class="clear"></div>
</div>

styles:

.clear{
 clear:both;
}

.left{
 float:left;
}
于 2012-07-25T17:08:12.267 に答える