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

Question

当我今天早上出发时,任务似乎很简单:建立一个元素列表; 每个元素由缩略图,标题和子标题组成.

我想让图像与其旁边的标题和副标题保持一致.如果您查看YouTube视频页面:"相关视频"框的布局类似.

更新:更具体一点:我正在尝试生成两列布局:左侧是图像,右侧是文本.一些建议的解决方案导致文本被包裹在图像周围.

这里是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吗？

谢谢!标记.

Answer 1

把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和h3作为标题（以保持标记语义）。