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 。什么都没有帮助。

我最接近的是设置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作为标题（以便保持标记语义）。

Answer 2

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

background url(image path) no-repeat;

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

Answer 3

尝试<span>代替<div>。 Span是内联的，而div是盒装的。（还有其他一些事情可以让div内联，但我希望它们会破坏你页面的其余部分。）

Answer 4

与YouTube相关的观看次数使用的是DIV，而不是UL＆gt; 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即可。这很简单。

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

4 个答案: