使用CSS在ul li列表中设置图像样式

Question

我遇到了问题，希望stackoverfolw社区可以帮助我。

我想按照列出的顺序放置带有文字的图片，所以我使用 ul＆gt; li 列表。当我写一个文本少于图像高度的段落时，我的问题就开始了，下一个段落就在我不想要的旁边。我知道它没有很好地描述，所以我附上了它的图像。 这是该截图的HTML

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

对齐alignleft是

.alignleft{float:left;}

如果我将CSS设置为.alignleft{float:left;clear:both}，那么这个问题就解决了，但另一个问题就出现了。

以下是使用.alignleft {float：left; clear：both;}设置样式的列出项目的屏幕截图 右侧广告的格式为.alignright{float:right;}。由于清晰：两种风格，广告没有内容。

有没有选择让我可以同时实现这两个目标？如下图所示

Answer 1

使用.alignleft{float:left;clear:left}仅清除左侧定向浮动。

另见

• All about floats（关于使用float和clear）的文章
• CSS 2.1: 9.5.2 Controlling flow next to floats: the 'clear' property：

    

  clear：left ：生成框的间隙设置为将顶部边框边缘放置在任何左浮动框的底部外边缘下方所需的数量源于源文档中较早的元素。