在数据应用开发中，Streamlit凭借其简洁的API和快速迭代能力成为数据科学家和开发者的首选工具之一。然而，当需要在相邻列中并排展示Plotly交互式图表与自定义HTML卡片时，垂直对齐问题常常让开发者头疼。本文将深入剖析这一技术痛点，并提供多种行之有效的解决方案。

问题背景：Streamlit列容器与Flexbox布局

Streamlit的st.columns函数基于CSS Flexbox布局创建等宽或不等宽列。默认情况下，列内元素会按顶部对齐（align-items: flex-start），这意味着当左右两列内容高度不一致时，顶部对齐可能导致视觉上的不协调。例如，左列放置一个高度为500px的Plotly图表，右列放置一个高度仅为200px的HTML卡片，右侧卡片会紧贴列顶部，下方留下大片空白，严重影响页面美观。

核心难点：内容高度动态未知

不同于静态HTML页面，Plotly图表的高度取决于数据量、图形类型以及配置的height参数，而自定义HTML卡片也可能包含动态内容（如文字、图片、按钮等）。两列高度无法在编码阶段预先确定，因此无法通过简单的margin-top或padding硬编码实现对齐。此外，Streamlit的渲染机制在每次交互后都会重新运行脚本，动态计算高度变得更加困难。

解决方案一：CSS Stretch与Flex对齐

最直接的方法是借助Streamlit对Markdown和HTML的支持，使用内联CSS或全局样式覆盖列容器的align-items属性。具体操作如下：

import streamlit as st
import plotly.graph_objects as go

# 设置列容器为stretch对齐
st.markdown("""
<style>
    div[data-testid="column"] {
        display: flex;
        flex-direction: column;
        justify-content: stretch;
    }
</style>
""", unsafe_allow_html=True)

col1, col2 = st.columns(2)
with col1:
    fig = go.Figure(data=[go.Scatter(y=[1, 2, 3])])
    fig.update_layout(height=400)
    st.plotly_chart(fig, use_container_width=True)
with col2:
    # 自定义HTML卡片，高度可能小于或大于图表
    st.markdown("""
    <div style="border:1px solid #ccc; padding:20px; background:#f9f9f9;">
        <h3>卡片标题</h3>
        <p>卡片内容描述</p>
    </div>
    """, unsafe_allow_html=True)

上述代码通过CSS选择器div[data-testid="column"]定位Streamlit生成的列容器，并设置justify-content: stretch，使列内元素自动拉伸以填满容器高度。此方法简单高效，但要求两列容器高度必须一致（取决于列容器本身的高度，通常由父容器决定）。若父容器高度未明确设定，拉伸效果可能不理想。

解决方案二：JavaScript动态调整高度

当列容器高度不固定时，可以借助Streamlit的st.components.v1.html组件注入JavaScript，动态获取并设置列高度。例如，在页面加载后获取左侧图表高度，再将其赋值给右侧卡片所在列。

import streamlit.components.v1 as components

# 在HTML卡片中嵌入JavaScript
components.html("""
<div id="card-wrapper">
    <div style="border:1px solid #ccc; padding:20px; background:#f9f9f9;">
        <h3>卡片标题</h3>
        <p>卡片内容描述</p>
    </div>
</div>
<script>
    // 等待图表加载完成
    setTimeout(function() {
        var leftCol = document.querySelectorAll('[data-testid="column"]')[0];
        var rightCol = document.querySelectorAll('[data-testid="column"]')[1];
        if (leftCol && rightCol) {
            var leftHeight = leftCol.offsetHeight;
            rightCol.style.height = leftHeight + 'px';
        }
    }, 500);
</script>
""", height=200)

此方案灵活但存在延迟，且需注意Streamlit的重新运行可能导致脚本失效。建议将脚本放在st.markdown的<script>标签中，或在st.echo中执行。

解决方案三：Streamlit布局技巧——占位符与容器

如果不希望借助外部CSS/JS，可以利用Streamlit自身的容器嵌套特性。例如，使用st.empty()创建占位符，待图表渲染后手动设置卡片高度。但该方法需要多次运行脚本，不推荐用于生产环境。

另一种思路是将卡片内容包装在st.container中，并赋予固定高度（如使用st.columns的gap参数调整间距），但本质上仍属于硬编码。

最佳实践建议

  1. 明确需求：若两列内容高度预期相似，优先使用CSS stretch方案。
  2. 动态场景：当内容高度差异较大且需实时对齐时，采用JavaScript方案，并设置合理的超时时间。
  3. 组件化封装：将对齐逻辑封装为自定义Streamlit组件，方便复用。
  4. 性能考量：避免在大量列上使用JavaScript监听，以免影响页面响应速度。

结语

垂直对齐问题虽小，却深刻影响用户对数据应用的第一印象。通过理解Streamlit的布局机制并灵活运用CSS、JavaScript或原生容器方式，开发者可以轻松实现对齐，打造专业美观的交互界面。随着Streamlit社区的发展，未来或将内置更完善的对齐控件，但目前掌握上述技巧仍是每位Streamlit开发者的必备技能。