测试显示在下一列图像的底部

Question

我正在尝试添加和图像，然后在该图像的右侧放置一些文本（标题），并在此标题下面放置地点和ul。但问题是当我使用float left 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

使用display 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;

Answer 2

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

example