CSS中的自动换行

Question

我正在尝试实现以下显示。

我的HTML＆amp; css就是这样......

<div class="label iepngfix">Nickname</div>
<div class="text">
   <?php echo $nickname; ?>
</div>

.label {
    float: left;
    font-weight: bold;
    padding: 0;
}

.text {
    float: left;
    margin: 0 0 0 5px;
    word-wrap: break-word;
}

在IE6中，7看起来不错，但在IE8，Chrome和Firefox中，它看起来像这样......

我在这里错过了什么？

此致

Answer 1

你的CSS和HTML并不真正匹配，但我的猜测是，因为你没有给第二个浮点数增加宽度并且它包含一个长文本，所以浏览器使它尽可能宽，因此它不会适合在第一个漂浮物旁边。

或者你没有向我们展示的东西正在触发这一点。您的页面是否触发标准模式（例如，它是否有DOCTYPE）？

Answer 2

如果你给div.text一个设定的宽度，你将得到你正在寻找的结果。

示例：如果包含框为250px，div.label自然为90px，则div.text需要设置155px或更小的宽度（考虑到它的5px边距）。