使用浮动图像时，HTML列表未垂直对齐

您缺少的部分是清除

float

li:after {    content: '';    display: block;    clear: both;}

现在您将删除“嵌套”。

请注意，在使用浮动容器时，应始终将

clear

它们放置在紧随其后的下一个容器之前，从而在调用它时创建新的 块格式化上下文
。否则，您将看到不可预测的行为。

修改后的演示如下：

img {    float: left;    margin-right: 0.1em;}li:after {    content: '';    display: block;    clear: both;}<ul><li><h3>photo</h3><img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo</li><li><h3>photo</h3><img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG" /> some text next to the photo</li><li><h3>photo</h3><img src="http://commons.cathopedia.org/w/images/commons/thumb/f/fe/Carnevale_di_Venezia.JPG/250px-Carnevale_di_Venezia.JPG"  /> some text next to the photo</li></ul>