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，文本将显示在图像下方。我尝试了很多东西，float:left 在图像和/或 div 上。没有任何帮助。

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

我是否采取了错误的方法？我需要以不同的方式构建 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 作为标题（以保持标记语义）。

Answer 2

你可以给每个<li> 一个班级并申请

background url(image path) no-repeat;

然后给左填充等于图像的宽度以移动文本并显示图像

Answer 3

尝试用<span> 代替<div>。 Span 是内联的，而 div 是盒装的。 （您可以采取其他措施使 div 内联，但我希望它们会破坏您页面的其余部分。）

Answer 4

YouTube 相关视图使用 DIV，而不是 UL>LI 组合。这是他们标记的一部分：

<div class="video-entry ">
        <a class="video-thumb-90" href="/watch?v=z-ze42I6NEo&amp;feature=related">
<img alt="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)" qlicon="z-ze42I6NEo" class="vimg90" src="http://i3.ytimg.com/vi/z-ze42I6NEo/default.jpg" title="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)"><button onmousedown="yt.analytics.urchinTracker('/Events/VideoWatch/QuickList+AddTo')" onmouseout="yt.www.watch.quicklist.mouseOutQuickAdd(this)" onmouseover="yt.www.watch.quicklist.mouseOverQuickAdd(this)" onclick="return yt.www.watch.quicklist.onQuickAddClick(this, this.getAttribute('ql'), 'http://i3.ytimg.com/vi/z-ze42I6NEo/default.jpg', 'Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)')" class="master-sprite QLIconImg addtoQL90" title="Add Video to QuickList" ql="z-ze42I6NEo"></button><span style="display: none;" class="quicklist-inlist">Added to <br> Quicklist</span><span class="video-time"><span>0:45</span></span></a>
        <div class="video-main-content">
            <div class="video-mini-title"><a rel="nofollow" title="Hereford Utd v Newcastle Utd 5 Feb 1972 (Hereford Utd Goals)" href="/watch?v=z-ze42I6NEo&amp;feature=related">Hereford Utd v Newcastle Utd 5 Feb 1972 (Herefo...</a></div>
            <div class="video-view-count">73,309 views</div>
            <div class="video-username"><a href="/user/Boney1960">Boney1960</a></div>

        </div>
        <div class="video-clear-list-left"></div>
    </div>

如果您想复制您看到的效果，只需检查文档的 HTML。做起来很简单。