你可以使用以下样式实现纵列显示,图片在右边,文字信息在图片的左边:
<div class="list-container">
<div class="list-item">
<img src="image1.jpg" alt="Image 1" class="list-item-image">
<div class="list-item-content">
<h3 class="list-item-title">Title 1</h3>
<p class="list-item-info">Info 1</p>
</div>
</div>
<div class="list-item">
<img src="image2.jpg" alt="Image 2" class="list-item-image">
<div class="list-item-content">
<h3 class="list-item-title">Title 2</h3>
<p class="list-item-info">Info 2</p>
</div>
</div>
<!-- 更多列表项... -->
</div>
记得将 image1.jpg 和 image2.jpg 替换为真实的图片路径。这个样式会创建一个名为 list-container 的容器,在其中每个列表项都有一个名为 list-item 的 div 元素。列表项中包含一个图片元素和一个包含标题和信息的内容块。
然后,将上面提供的 CSS 样式添加到 <style></style> 标签中即可。
内容由零声教学AI助手提供,问题来源于学员提问




