CSS float-left 防止单词换行答案

【问题标题】：CSS float-left prevent words to go on new lineCSS float-left 防止单词换行
【发布时间】：2015-05-07 12:58:57
【问题描述】：

我有以下代码：

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 提供固定宽度。

如何防止这种情况发生？

【问题讨论】：

你能添加你的整个css吗？
这听起来更像是你想从<h1></h1> 中浮动<div>something</div>，以便h1 可以是全宽但环绕浮动的东西div？

标签： html css css-float floating

【解决方案1】：

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

【讨论】：

【解决方案2】：

你可以这样尝试：

<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;

【讨论】：