私は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 に制限はありますか? 私は周りを検索してきましたが、フローティングする必要があるチュートリアルは、画像の周りにテキストをフローティングする方向に向けられているようです。
どんな助けでも大歓迎です。