CSS：在列表项中显示彼此相邻的图像和div [英] CSS: Show an image and a div next to each other in list item

问题描述

当我今天早上出发时，任务看起来很简单：建立一个元素列表;每个元素由一个缩略图，一个标题和一个子标题组成。

我想让图片与其旁边的标题和副标题保持一致。如果您查看YouTube视频页面，则相关视频框中的布局类似。

更新：更具体一点：我试图产生两列布局：左侧图像，右侧图像。一些建议的解决方案导致文本被图像包裹。

这里是HTML结构：

 < ul> 
< li>< img src =one.jpg>< div class =content>标题< br>子标题< / div>< / li> 
< li>< img src =two.jpg>< div class =content>另一个标题< br>子标题< / div>< / li> 
< / ul> 
  

如果没有CSS，文本将显示在图像下方。我在图片和/或div上尝试了很多东西， float：left 。没什么帮助。

我得到的最接近的是为 img 标记设置float：left。但是第二个清单项目已经在第一个清单的中间画出来了。

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

谢谢！
Mark。

解决方案

将 img code> div ，那么你可以浮动它。然后清除漂浮物，例如通过使用 br ：

 < li>< div class =content>< img src =one.jpg>标题< br>子标题< / div>< br style =clear：both>< / li> 
  

CSS：

  .content img {float：left} 
  

更好的是，摆脱div （可以直接设置 li ）并使用 h2 和 h3 作为标题（以保持标记语义）。

When I set out this morning the task seemed simple: build a list of elements; each element consists of a thumbnail, a title, and a sub-title.

I'd like to have the image left aligned with the title and sub-title next to it. If you take a look at a YouTube video page: the Related Videos box has a similar layout.

UPDATE: To be more specific: I'm trying to produce a two column layout: image on the left, text on the right. Some of the suggested solutions result in the text being wrapped around the image.

Here the HTML structure:

<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>

With no CSS, the text is displayed below the image. I tried many things, float:left on the image and/or the div. Nothing helped.

The closest I got was setting float:left for the img tag. But then the second list item was drawn halfway into the first one.

Am I taking the wrong approach? Do I need to structure the HTML differently?

Thanks! Mark.

解决方案

Put the img inside the div, then you can float it. Then clear the float, e.g. by using a br:

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

CSS:

 .content img {float:left}

Better yet, get rid of the div altogether (you can style the li directly) and use h2 and h3 for the headings (so as to keep the markup semantic).

这篇关于CSS：在列表项中显示彼此相邻的图像和div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！