2

我正在使用 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 和浮动左侧是否有一些限制？我一直在四处寻找，但必须浮动教程似乎面向图像周围的浮动文本。

任何帮助将非常感激。

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

你可能没有清理你的浮动。 

<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 回答
0

您需要在#applyProjectcountry 之后重置浮动设置。所以把它放在最后一个带有浮动的元素之后：

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