測試出現在圖像底部的下一列

Question

我想添加圖像，然後在該圖像右側放置一些文本（標題），並在該標題下放置地點和ul。但問題是，當我使用浮動左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

使用顯示顯示：內聯塊;在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% 
} 

只是接近這樣或使用顯示：內聯塊;

Answer 2

正如Arpit所說，使用內聯塊。 此外，圖像是相當小的，所以你可以選擇一些利潤/填充添加到圖像& UL，使一切對準正確

example