Question

我正在通过CSS工作并尝试使用div和css格式化输入表单。我更确定我使用CSS规则是错误的，我正在试图弄清楚我在做什么是错的。此图像显示不同颜色的div块。这些不同颜色块中的每一个都是具有唯一ID的div：

colored blocks http://www.ws7m.net/filechute/2012-07-25_10-53-13.png

我要做的是将“国家/地区”块塞进“邮件代码”块的右侧。在上图中，State有float：left，邮件代码左浮。如果我向包含国家的div添加浮动，则所有三个跳转到紫色块（圆形边框）之外：

jumped 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代码和Country作为他们自己的宽小的div。我尝试在每个上面使用浮动，它就像上面的图像。所以我尝试的最后一件事就是将它们放在一个名为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和float lefts有一些限制吗？我一直在寻找，但必须浮动教程似乎面向图像周围的浮动文本。

非常感谢任何帮助。

Answer 1

你需要清除这样的花车：

<div style="clear: both;"></div>

Answer 2

另一个选择是为你的花车周围的div添加一个溢出样式。这将使div扩展到必要的大小。

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

Answer 3

你可能没有清理浮子。

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

styles:

.clear{
 clear:both;
}

.left{
 float:left;
}

Answer 4

您需要在#applyProjectcountry之后重置浮动设置。所以把这个放在最后一个元素之后用float：

<div style="clear:both;"></div>

CSS multiple float：left问题

4 个答案: