html - CSS float-left 防止单词换行

Question

我有以下代码:

html

<div class="container">
    <div class="float-left">
        <a href="#"><img width="550" src="image.jpg" alt="" /></a>
    </div>
    <div class="float-left">
        <h1 class="new">Some long text here that should word wrap</h1>
    </div>
    <div class="clear"></div>
<div>

CSS

.container{
    width:960px;
}
.float-left {
    float:left
}
.clear{
    clear:both;
}
h1.new{
    font-family: RockwellMT-Light;
    font-size: 28px;
    line-height: 31px;
}

我希望 div 像 2 列一样工作，一个是图像，第二个应该是文本，可以尽可能多地下降。由于 float left 没有固定宽度，问题是整个元素 h1 都跳到新行上，而文本不会跳到下一行。我不想为 float div 提供固定宽度。

我怎样才能避免这种情况？

Answer 1

您可以删除 class="float-left"从第二个<div>它会起作用。