闪亮的盒子动态调整高度

Question

我展示了 3 个闪亮的盒子，如下所示：

我有两个过滤国家。框的标题根据两个过滤器而变化。现在的问题是，当标题在第一个框中分成两行时，高度会增加，但其他两个框的高度保持不变，因此高度不对齐。如何实现高度的自动调节？一个我可以研究的例子就很好了。

Answer 1

如果没有数据示例，很难对此进行测试，但您可以尝试将盒子包装在容器中并将

display: flex

应用于该容器。

所以代码会是这样的

图书馆（闪亮）

ui <- fluidPage(
  tags$head(
    tags$style(
        "
        .flex-container {
          display: flex;
        }
        # Because I do now have actual code and figures I've added border around the box (this may not be needed in your case) only flex-container
        .shiny-box {
          border: 1px solid black;
          padding: 20px;
          margin: 5px;
          flex: 1;
        }
"
    )
  ),
  
  div(class = "flex-container",
      div(class = "shiny-box", "UAE customs efficiency."),
      div(class = "shiny-box", "Clear exports. some text some more text some more text gor height purposes ............"),
      div(class = "shiny-box", "Clear imports.")
  )
)

server <- function(input, output) {
  
}

shinyApp(ui, server)

和输出