Plotly Dash：图表与DataTable无法并排显示、表格错位至下方问题

问题原因 #

该布局错位是因为inline-block元素默认垂直对齐规则为baseline，dt.DataTable组件的内容基线与dcc.Graph的内容基线不一致，导致两个宽度和为98%的容器无法在同一行展示，错误效果如下图：

解决方案 #

方案1：保留inline-block布局，补充垂直对齐属性

给两个外层Div的style参数新增'vertical-align': 'top'属性即可：

app.layout = html.Div([
    html.Div(
        [dcc.Graph(figure = fig)], 
        style = {'width': '49%', 'display': 'inline-block', 'vertical-align': 'top'}
    ),
    html.Div(
        [dt.DataTable(
            data=df.to_dict('records'),
            columns=[{'id': c, 'name': c} for c in df.columns],
            style_table = {'height': 200, 'overflowX': 'auto'}
        )], 
        style = {'width': '49%', 'display': 'inline-block', 'vertical-align': 'top'}
    ),
])

方案2：使用Flex布局（更稳定，适配性更强）

直接给父容器设置Flex布局规则，无需单独给子容器设置display: inline-block：

app.layout = html.Div([
    html.Div(
        [dcc.Graph(figure = fig)], 
        style = {'width': '49%'}
    ),
    html.Div(
        [dt.DataTable(
            data=df.to_dict('records'),
            columns=[{'id': c, 'name': c} for c in df.columns],
            style_table = {'height': 200, 'overflowX': 'auto'}
        )], 
        style = {'width': '49%'}
    ),
], style={'display': 'flex', 'justify-content': 'space-between'})

两种方案均可实现图表与DataTable在同一行水平并排展示，不会出现垂直错位问题。

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