CSS：在列表项中显示彼此相邻的图像和div

当我今天早上出发时，任务似乎很简单：建立一个元素列表；每个元素由缩略图、标题和副标题组成。

我想让图像与其旁边的标题和副标题对齐。如果您查看 YouTube 视频页面：“相关视频”框具有类似的布局。

UPDATE: 更具体地说：我正在尝试生成两列布局：左侧是图像，右侧是文本。一些建议的解决方案会导致文本环绕图像。

HTML 结构如下：

<ul>
  <li><img src="one.jpg"><div class="content">Title<br>sub-title</div></li>
  <li><img src="two.jpg"><div class="content">Another Title<br>sub-title</div></li>
</ul>

如果没有 CSS，文本将显示在图像下方。我尝试了很多事情，向左飘浮在图像和/或 div 上。没有任何帮助。

我得到的最接近的是设置 float:left 为img标签。但随后第二个列表项被绘制到第一个列表项的中间。

我采取了错误的方法吗？我需要以不同的方式构建 HTML 吗？

谢谢！ 标记。

Put the img在 - 的里面div，然后就可以浮动它了。然后清除浮动，例如通过使用br:

 <li><div class="content"><img src="one.jpg">Title<br>sub-title</div><br style="clear:both"></li>

CSS:

 .content img {float:left}

更好的是，完全摆脱 div （你可以设置样式li直接）并使用h2 and h3标题（以便保持标记语义）。