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 在新行上跳跃，文本不会在下一行。我不想给浮动 div 固定宽度。

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

Answer 1

你可以这样试试：

<div class="container">
    <div class="something">something</div>
    <div class="nextthing float-left">
        <h1 class="new">Some long text here that should word wrap</h1>
    </div>
    <div class="clear"></div>
<div>


.container {
 position: relative;
}
.something {
 position: absolute;
}
.nextthing {
 text-indent: size_of_.something;
}

或将float:left改为display:inline-block;

Answer 2

您可以从第二个 <div> 中删除 class="float-left"，这样就可以了。

CSS float-left 防止单词换行

CSS float-left prevent words to go on new line

html

css

css-float

floating