Plotly Dash - 文本未与图表对齐

Question

即使我创建了两个分区，第二个分区中的文本也会显示在第一个分区中。如下图所示——我用来制作它的代码 -###### Runs Distributionshtml.H2("Runs Distributions"),# Histogram of Runs Distributionshtml.Div(    [        html.Div(            [                html.P(                    "We can see that the distribution is right skewed. Many "                    "players makes low or medium runs, while few players makes "                    "lots of runs. The median of this distribution is 126 which "                    "means that 50% of the players makes less than 126 runs and  "                    "50% more than this. 406 is the 90th percentile, meaning 90% "                    "of the players makes less than 406 runs. So, any players who "                    "is making more than 400 runs in a season is really doing well. "                    "They are in the top 10%."                )            ],            style={                "width": "35%",                "display": "inline-block",                "margin-top": "60px",            },        ),        html.Div(            [dcc.Graph(id="runs-dist-plot", figure=runs_dist_plot)],            style={"width": "65%", "float": "right", "display": "inline-block"},        ),    ],    style={"margin": "40px"},),# Kernal density estimation of Runs distributionshtml.Div(    [        html.Div(            [html.P("Gonna Write something.")],            style={                "width": "35%",                "display": "inline-block",                "margin-top": "60px",            },        ),        html.Div(            [dcc.Graph(id="runs-kde-plot", figure=runs_kde_plot)],            style={"width": "65%", "float": "right", "display": "inline-block"},        ),    ],    style={"margin": "40px"},),无法理解为什么会发生这种情况？一种方法是调整第二部分中段落标签的页边距样式，但我有很多图表要在这些图表下面绘制。因此，通过反复试验来改变每个图的值将是非常乏味的。有没有办法为将来的情节设置一次。

Answer 1

我在本地使用图形的一些占位符运行此程序，并且能够使用第一个分区的高度值将文本与第二个图形一起下载。您所在的地方：

style={"margin": "40px"},

我改为：

style={"margin": "40px", "height": 500},

如果您想在第二个分区内对齐文本，则需要从框的顶部进行调整。

我处理所有这些问题的首选方法是使用flexbox，但这需要进行更多更改并删除inline-block您所拥有的，因此我在这里只进行了最小的更改。