在Pandas DataFrame中实现变体与图片分栏同层显示的方法

要实现所有变体标题在同一水平行、图片在下方同一水平行的布局，不需要依赖Pandas默认的表格渲染，直接生成自定义HTML结构配合CSS Flex布局即可，具体代码如下：

import pandas as pd
from IPython.display import HTML

# 初始化你的DataFrame
df = pd.DataFrame([['variant1'], 
                   ['variant2'],
                   ['variant3']],
                   columns = ['variant_title'])

images = ['https://ic.maxabout.us//cars/maruti/maruti-suzuki-swift-sport//Maruti_Suzuki_Swift_Sport_11.jpg',
          'https://ic.maxabout.us//cars/maruti/maruti-suzuki-swift-sport//Maruti_Suzuki_Swift_Sport_15.jpg',
          'https://ic.maxabout.us//cars/maruti/maruti-suzuki-swift-sport//Maruti_Suzuki_Swift_Sport_12.jpg' ] 
df['url']= images         

# 构建标题横向容器：Flex布局居中，每个标题宽度与图片一致
title_container = '<div style="display: flex; justify-content: center; gap: 20px; margin-bottom: 12px;">'
for title in df['variant_title']:
    title_container += f'<div style="width: 180px; text-align: center;">{title}</div>'
title_container += '</div>'

# 构建图片横向容器：Flex布局居中，图片统一宽度
image_container = '<div style="display: flex; justify-content: center; gap: 20px;">'
for img_url in df['url']:
    image_container += f'<img src="{img_url}" width="180" style="object-fit: contain;">'
image_container += '</div>'

# 合并并渲染最终HTML
HTML(title_container + image_container)

关键说明： #

• 使用CSS display: flex 实现横向排列，justify-content: center 让整体居中对齐
• gap 属性控制元素间的间距，可根据需求调整
• 给每个标题设置与图片相同的宽度（180px），保证标题和图片一一对应对齐
• object-fit: contain 确保图片按比例显示，不会拉伸变形

内容的提问来源于stack exchange，提问作者Shashank Gupta