html - 正确排列 float 的 HTML 元素

Question

我正在使用 float 来安排布局。

<style>
div {
    float: left;
}

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

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

当“长属性名称:”溢出到新行时，我希望“值”也转到新行。我应该在此 HTML 代码中做什么？谢谢。现在，“值(value)”仍然居于首位。

当前结果

我想要什么

谢谢

Answer 1

如果你使用 display: inline-block 而不是 float 会更好:

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

检查这个:http://jsfiddle.net/thirtydot/wczcC/2/