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

概述当我今天早上出发时,任务似乎很简单：建立一个元素列表;每个元素由缩略图,标题和子标题组成. 我想让图像与其旁边的标题和副标题保持一致.如果您查看YouTube视频页面：“相关视频”框的布局类似. 更新：更具体一点：我正在尝试生成两列布局：左侧是图像,右侧是文本.一些建议的解决方案导致文本被包裹在图像周围. 这里是HTML结构： <ul> <li><img src="one.jpg"><div 当我今天早上出发时,任务似乎很简单：建立一个元素列表;每个元素由缩略图,标题和子标题组成.

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

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

这里是HTML结构：

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

没有CSS,文本显示在图像下方.我试了很多东西,浮动：留在图像和/或div上.什么都没有帮助.

我最接近的是设置float：left为img标签.但是第二个列表项目是在第一个项目的中途绘制的.

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

谢谢！
标记.

解决方法 将img放在div中,然后你可以浮动它.然后清除浮子,例如通过使用br：

<li><div ><img src="one.jpg">Title<br>sub-Title</div><br ></li>

CSS：

.content img {float:left}

更好的是,完全摆脱div(你可以直接设置li)并使用h2和h3作为标题(以便保持标记语义).

总结

以上是内存溢出为你收集整理的html – CSS：在列表项中显示彼此相邻的图像和div全部内容，希望文章能够帮你解决html – CSS：在列表项中显示彼此相邻的图像和div所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。