html - 测试出现在下一列图像的底部

Question

我正在尝试添加和图像，然后在该图像的右侧放置一些文本(标题)，并在该标题下方放置 place 和 ul。但问题是当我对 img 使用 float left 时，文本出现在图像的右侧，但也出现在图像的底部。我想让文本和 ul 显示在右侧，同时也显示在图像的顶部。

目前它看起来像下图

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

<img src="images/image1.png" width="48" height="48" class="intro" />
<p class="title">
    Inter
</p>
<p>
<ul>
<li>One statement</li>
<li>One statement</li>
<li>One statement</li>
</ul>
</p>

.intro {
    float: left;
}

Answer 1

使用display显示:inline-block；在 p 和 li 或使用

<div class="edit">
    <img src="images/image1.png" width="48" height="48" class="intro" />
    <p class="title">
        Inter
    </p>
    <p>
    <ul>
    <li>One statement</li>
    <li>One statement</li>
    <li>One statement</li>
    </ul>
    </p>
   </div>

CSS:

.div{
 float:left;
 width:400px or 100%;
 }
 img
{
  width:50%
}

就这样处理或者使用 display:inline-block;