正确排列浮动HTML元素

Question

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

<style>
div {
    float: left;
}

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

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

当“长属性名称：”溢出到新行时，我希望“值”也转到新行。我该怎么做这个HTML代码？谢谢。现在，“价值”仍然保持领先。

当前结果

我想要什么

谢谢

Answer 1

最好使用display: inline-block代替float：

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

请检查：http://jsfiddle.net/thirtydot/wczcC/2/