浮动问题

Question

我试图使它使得布局看起来像下面的（原油）模型笑：

--div ----------------
|       label TextBox |
|       label TextBox |
|       label TextBox |
| ------------------- |

这是我有...

.personalInfo_Form 
{ 
width:600px; 
margin: auto; 
padding: 20px; 
background-color: White; 
} 

.addressLabel 
{ 
float: left; 
width: 140px; 
padding: 5px; 
text-align: right; 
} 

.addressField 
{ 
float: left; 
padding: 5px; 
} 

最终的结果看在Firefox是各行偏移和不统一。我已经注意到，指定div的非常具体的宽度可以改变位置的结果，这是合理的，因为它会强制执行默认情况下项不能重叠的浮动规则，从而将它们置于彼此之下...但是，我希望设计它使Div的宽度不是内部元素定位的一个因素。

欢呼声！

Answer 1

将clear: both;或clear: left;添加到您的.addressLabel风格。你将不得不通过浮动包含的div或提供一个clearfix来确保div继续超出浮动元素。