html - 正确排列浮动 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/