CSS多浮点数：左问题

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

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

我试图做的是掖“国家”堵到“邮件代码”块的右边。在上面的图像中有浮动：左侧，邮件代码已经向左浮动。如果我加浮动留给含国家DIV，所有三个跳跃的紫色块（圆角边框）外：

jumped http://www.ws7m.net/filechute/2012-07-25_10-54-44.png

是有一些限制的数量“浮动：左派”与块？这里有相当多的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。我尝试使用每个浮动左，它确实喜欢上面的图像。因此，我尝试的最后一件事是将它们放在一个名为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和float左移限制？我一直在四处搜寻，但必须浮动教程似乎围绕图像浮动文字。

任何帮助将不胜感激。

来源

2012-07-25 MarkHolbrook

如果您在http://www.jsfiddle.net – SVS 2012-07-25 17:07:00

中重新创建此问题将会很好，并在此处发布您的HTML。 – j08691 2012-07-25 17:09:02

从来没有使用jsfiddle，但我会试一试。 – MarkHolbrook 2012-07-25 18:33:33

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

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

styles: 

.clear{ 
clear:both; 
} 

.left{ 
float:left; 
}

来源

2012-07-25 17:08:12 FiveTools

+1用于创建可重用类。这是应该始终如此的。 – ohiock 2012-07-25 17:57:57

.clear类有时是必需的，但通常，您应该更喜欢父级的overflow：属性以防止添加不必要的标记。 – mskfisher 2012-07-25 18:20:23

你需要清除这样的彩车：

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

来源

2012-07-25 17:08:36

您需要#applyProjectcountry后浮动设置复位。所以把这个最后一个元素与浮点数之后：

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

来源

2012-07-25 17:12:04

另一种选择是将溢出风格添加到环绕您的浮动的div。这将使div扩大到必要的大小。

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

来源

2012-07-25 17:54:09 bohawi

CSS多浮点数：左问题

回答

相关问题