正确排列浮动HTML元素

Question

我正在使用浮动来排列布局。

<style> 
div { 
    float: left; 
} 

.pro { 
    width : 100px; 
    color : blue; 
} 
</style> 

<span> 
<div class="pro">Long property name : </div> 
<div>value</div> 
</span> 

当“Long property name：”溢出到新行时，我希望“value”也转到新行。我应该在这个HTML代码中做什么？谢谢。目前“价值”仍然居于榜首。

当前结果

我想

感谢

Answer 1

它的更好，如果你使用display: inline-block，而不是float此：

div { 
    display: inline-block; 
    *display: inline; /*For IE7*/ 
    *zoom: 1; 
} 

选中此项：http://jsfiddle.net/thirtydot/wczcC/2/