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列一样。一个是图像，第二个应该是文本，可以尽可能多地下去。由于浮动左边没有固定宽度，问题是整个元素h1在新线上跳跃而文本不在下一行。我不想给浮动div赋予固定宽度。

我该如何防止这种情况？

Answer 1

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

Answer 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，以显示：inline-block;

CSS float-left阻止单词进入新行

2 个答案: