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，所以我只做了最小的我可以在这里改变。

Plotly Dash - 文本未与图形对齐

Plotly Dash - Text is not getting aligned with the Graph

python

plotly

plotly-dash