html 组件堆叠而不是使用破折号的列

Question

我是 Dash 的新手，在尝试设置我的应用程序时遇到了运行问题。我想并排绘制两个文本框。一个应该占据屏幕的 1/3 宽度，另一个应该使用剩余的 2/3。但是，当我运行我的应用程序时，这些框彼此重叠：

import dash
import dash_html_components as html

content = html.Div([
    html.Div([
        html.Div([html.H4('Simulation time', className='card-title')], className='four columns', style=dict(display='flex')),
        html.Div([html.H4('Simulation results', className='card-title')], className='eight columns', style=dict(display='flex'))
    ], className='row', style=dict(display='flex'))
], style=dict(display='flex'))

app = dash.Dash(__name__)
app.layout = content

if __name__ == '__main__':
    app.run_server(debug=True)

感谢任何帮助。

Answer 1

当我运行没有更改时，您的代码运行良好。文字并排出现。我已经更新它以提供您正在寻找的宽度。

content = html.Div([
    html.Div([
        html.Div([html.H4('Simulation time', className='card-title')], className='four columns', style=dict(width='33%')),
        html.Div([html.H4('Simulation results', className='card-title')], className='eight columns', style=dict(width='66%'))
    ], className='row', style=dict(display='flex', width='100%'))
], style=dict(display='flex'))

html 组件堆叠而不是使用破折号的列

html components stacks instead of columns using dash

python-3.x

plotly-dash