在 Plotly Dash 中对齐 2 个 html.Divs 文本

Posted

技术标签:

【中文标题】在 Plotly Dash 中对齐 2 个 html.Divs 文本【英文标题】:Aligning 2 html.Divs of text next to each other in Plotly Dash 【发布时间】:2022-01-18 12:32:04 【问题描述】:

我试图并排放置 2 个 Div 元素,但没有运气。我一直在关注 https://community.plotly.com/t/horizontally-stack-components/10806 和 https://medium.com/analytics-vidhya/dash-for-beginners-dash-plotly-python-fcd1fe02b749 指导使用 width

如果您查看附加的图片,它看起来应该是向右的块,实际上是,直到我通过在列表中选择一首歌曲来更新页面以在左侧显示歌词,然后它推动底部的建议。有什么想法吗?

我的代码如下所示:

html.Div([
            html.Div(id="lyrics",style='width': '50%', 'display': 'inline-block'),
            html.Div([
            html.H6(id="recommendations",children="Recommendations:"),
            html.H3(id="songsbysameartist",children='Songs by the same artist:',
                    ),
            html.H6(id="sameartistrecommendations",
                    ),
            html.H3(id="songsfromotherartists",children='Music from other artists that you might also like:',
                   ),
            html.H6(id="otherartistrecommendations",
                )
            ],
            style = 'width': '30%', 'display': 'inline-block')
            ])

编辑后的代码如下所示:

html.Div([
            html.Div(id="lyrics",style='width': '50%', 'display': 'inline-block'),
            html.Div([
            html.H6(id="recommendations",children="Recommendations:"),
            html.H3(id="songsbysameartist",children='Songs by the same artist:',
                    ),
            html.H6(id="sameartistrecommendations",
                    ),
            html.H3(id="songsfromotherartists",children='Music from other artists that you might also like:',
                   ),
            html.H6(id="otherartistrecommendations",
                )
            ],
            style = 'width': '30%', 'display': 'flex')
            ])

据我所知,由于底部样式已连接到上述建议的父 Div。

【问题讨论】:

你考虑过使用dash-bootstrap-components吗?在这里,您可以使用行和列在适合您需要的布局中排列内容。 同样使用display: flex作为父div应该可以很好地完成这项工作。 @MrLeeh 我实际上没有考虑过,它是否还包括具有相同功能的下拉菜单等?我已经在核心组件中完成了这一切,所以我宁愿让它与那个 :D 一起工作,尝试过 display: flex,但它不能正常工作。使用 display: flex 它只是将整个推荐块始终放在左侧 你能发布带有 display: flex 的代码吗?把它应用到父母身上很重要。孩子不应该有显示属性。 @MrLeeh 是的先生,我现在在主文档中添加了一段编辑过的代码:-) 【参考方案1】:

我找到了解决办法:

我相信错误出在结构上。父 Div 需要有 "display":"flex" 而 2 个子 Div 元素有 "display":"inline-block"

正确的代码是这样结束的:

html.Div([
                    html.Div([
                        html.Div(id="songandartist",style='display': 'flex',"fontSize" : 40,"marginBottom":50),
                        html.Div(id="lyrics",style='display': 'flex'
                        )
                    ],style='width': '49%', 'display': 'inline-block'),
                    html.Div([
                        html.Div(id="recommendations",children="Recommendations:",style="fontSize" : 40,"marginBottom":50,'display': 'flex'),
                        html.Div(id="songsbysameartist",style="fontSize" : 27,'display':'flex',children='Songs by the same artist:',
                        ),
                        html.Div(id="sameartistrecommendations",style="marginBottom":50,'whiteSpace': 'pre-line','display': 'flex'
                        ),
                        html.Div(id="songsfromotherartists",style="fontSize" : 27,'display': 'flex',children='Music from other artists that you might also like:',
                       ),
                        html.Div(id="otherartistrecommendations",style='whiteSpace': 'pre-line','display': 'flex'
                    )
                    ],
                style = 'width': '49%', 'display': 'inline-block')
                ],style="display": "flex")

【讨论】:

以上是关于在 Plotly Dash 中对齐 2 个 html.Divs 文本的主要内容,如果未能解决你的问题,请参考以下文章

如何在绘图条形图上左对齐文本(包含示例图像)[Plotly-Dash]

Plotly Dash 热图,链接到 2 个下拉菜单

Plotly Dash:dcc.Upload 组件的左填充

Plotly-Dash:- 文件上传后在 plotly dash 中进行多列过滤

输入变量值后,使用 Dash(来自 Plotly)在仪表板上输出值

Plotly / Dash:如何在气泡图的边缘强制裁剪?