正確排列浮動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/