CSS中的自动换行

Question

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

​

​

我的html和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和火狐中，它看起来是这样的……

​

​

我这里漏掉了什么？

问候

Answer 1

你的CSS和HTML并不匹配，但我的猜测是，由于你没有给第二个浮动赋予宽度，并且它包含一个很长的文本，所以浏览器会尽可能地使它变宽，因此它不能放在第一个浮动旁边。

或者是你没给我们看的东西触发了这一切。您的页面是否触发了标准模式(例如，它是否具有DOCTYPE)？

Answer 2

如果你给div.text设置一个宽度，你会得到你想要的结果。

例如:如果包含框是250px，div.label自然是90px，那么div.text需要设置为155px或更小的宽度(也就是考虑到5px的边距)。