使用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 ：将生成的框的间隙设置为将顶部边界放在源于源文档中前面的元素的所有左浮动框的底部外边缘下方的必要数量。