html - 图片下方的文字环绕

Question

我有一张小图片，我必须在该图片旁边显示一些文字。为此，我使用了下面的 html 和 css。

<div class="main">
   <img alt="image"/>
   <h2>this is heading text. This is heading text. This is heading text</h2>
</div>


.main{
    border:1px solid black;
    height:200px;
    width:400px;
    padding:20px;
}
h2{
    display:inline;
}

它是这样显示的

第二行在图像下方换行。我必须让第二行位于第一行的正下方，而不是在图像下方。

我也尝试过使用 float。但没有工作。请帮忙。

我创建了一个 fiddle 以便您可以轻松编辑它:http://jsfiddle.net/codingsolver/MtqHh/1/

Answer 1

您可以简单地 float 图像，然后将 h2 推到左边距。

http://jsfiddle.net/MtqHh/8/

img { float: left; }

h2{ margin: 0 0 0 50px; }