Plotly Dash - 文本未与图表对齐

Question

即使我创建了两个分区，第二个分区中的文本也会显示在第一个分区中。如下图所示——

我用来制作它的代码 -

###### Runs Distributions

html.H2("Runs Distributions"),

# Histogram of Runs Distributions

html.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 distributions

html.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您所拥有的，因此我在这里只进行了最小的更改。