使用ul li列表中的CSS樣式化圖像

Question

我遇到了一個問題，希望stackoverfolw社區可以為我提供幫助。

我想按文本順序排列帶有文本的圖像，所以我使用ul> li list。 當我寫的段落的文字少於圖像高度時，我的問題就開始了，下一個段落緊接在我不想要的旁邊。 我知道它的描述不充分，所以我要附上它的圖像。 這是該屏幕截圖的HTML

<ul><li>
<h2>title</h2>
<img src="" class="alignleft" width="200px"/> My text content
</li>
repeat the same again
</ul>

alignleft的css是

.alignleft{float:left;}

如果我將CSS設置為.alignleft{float:left;clear:both}那么此問題就解決了，但又出現了另一個問題。

這是列出的項目的屏幕快照，其樣式為.alignleft {float：left; clear：both;} 右側的廣告具有.alignright{float:right;}樣式。 由於這兩種風格都明確 ，因此廣告中沒有內容。

有什么選擇可以讓我同時實現的嗎？ 像下面的圖片

Answer 1

使用.alignleft{float:left;clear:left}僅清除左方向的浮點數。

也可以看看

• 關於浮點數 （有關使用float和clear文章）
• CSS 2.1：9.5.2控制浮點數旁邊的流：'clear'屬性 ：

  clear：left ：將生成的框的間隙設置為將頂部邊界放在源於源文檔中前面的元素的所有左浮動框的底部外邊緣下方的必要數量。