我正在使用 CSS 并尝试使用 div 和 css 来格式化输入表单。我非常确定我使用错误的 CSS 规则,并且我试图弄清楚我在做什么是错误的。此图像以不同颜色显示 div 块。这些不同的颜色块中的每一个都是具有唯一 ID 的 div:
彩色块 http://www.ws7m.net/filechute/2012-07-25_10-53-13.png
我要做的是将“国家”块塞到“邮件代码”块的右侧。在上图中,State 有 float:left,mail code 有 float left。如果我将 float left 添加到包含国家/地区的 div 中,则所有三个都跳出紫色块(圆形边框):
跳 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;
}
接下来的两个是街道线。我将它们分成 div 以便我可以提供一些间距。
#applyProjectaddress1
{
background: #F2AAC7;
margin-top: 5px;
width: 80%;
}
#applyProjectaddress2
{
background: #C97B9A;
margin-top: 5px;
width: 80%;
}
城市拥有自己的街区:
#applyProjectcity
{
background: #9C4B6B;
width: 80%;
}
好的,这里是鞭打开始的地方。起初,我将 State、Mail code 和 Country 作为它们自己的带宽度的小 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 中,它会导致 State、mailcode 和 country 跳出紫色 div。
我究竟做错了什么?这些 div 中的 div 和浮动左侧是否有一些限制?我一直在四处寻找,但必须浮动教程似乎面向图像周围的浮动文本。
任何帮助将非常感激。