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

Question

我正在尝试添加图像，然后在该图像的右侧放置一些文本（标题）以及该标题下方的位置和 ul。但问题是当我使用 float left to img 时，文本出现在图像的右侧，但也出现在图像的底部。我想让文本和 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

使用显示显示：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;

Answer 2

正如 Arpit 所说，使用内联块。此外，图像非常小，因此您可以选择在图像和 ul 中添加一些边距/填充以使所有内容正确对齐

例子