如何在 R 的 flexdashboard 中组合行和列布局？答案

【问题标题】：How to combine row and column layout in flexdashboard in R?如何在 R 的 flexdashboard 中组合行和列布局？
【发布时间】：2021-10-28 17:21:16
【问题描述】：

我正在考虑以某种方式组合列和行方向的布局。我正在考虑的布局是这样的：

有人有想法吗？提前致谢

【问题讨论】：

你想用runtime: shiny渲染它吗？如果它是一个静态 HTML 文件，您可以创建三列并将第二列和第三列创建为两个单独文件中的单独行页面，并通过 iframe 嵌入它们。
是的，我想用闪亮的方式渲染它。

标签： r shiny flexdashboard

【解决方案1】：

既然你想用闪亮的方式运行，可以通过以下方式完成：

---
title: "Title"
output: flexdashboard::flex_dashboard
runtime: shiny
---

```{r}
library(shiny)
```

```{css}
.box-inside {border: 1px #e2e2e2 solid; height: 200px;}
.top-box {margin: -20px -10px 5px -10px;}
.right-rows {height: 50%; margin-left: auto; margin-right: auto}
#section-column-2 .chart-shim.flowing-content-shim.flowing-content-container {
    overflow-y: hidden;
}
```

Column {data-width=10%}
-------------------------------------
### A
```{r}

```

Column {.mid-col data-width=70%}
-------------------------------------
### B

<div class="top-box">

```{r}
column(
    3, class = "box-inside",
    "Add your content here"
)
```

```{r}
column(
    3, class = "box-inside",
    "Add your content here"
)
```

```{r}
column(
    3, class = "box-inside",
    "Add your content here"
)
```

```{r}
column(
    3, class = "box-inside",
    "Add your content here"
)
```

</div>

Column {data-width=20%}
-------------------------------------
### C
```{r}
fluidRow(
    class = "right-rows",
    "row content"
)
```

<hr style="margin: auto -8px;">

```{r}
fluidRow(
    class = "right-rows",
    "row content"
)
```

用您自己的组件替换xx content。您可能想了解一下如何add UI to columns and rows

【讨论】：