Question

在此感谢一些CSS帮助。
我想要实现的是以下布局。

我可以轻松地获得没有右侧栏的布局：

---
title: "Title"
output: 
  flexdashboard::flex_dashboard:
    vertical_layout: fill
    orientation: rows
    css: styles.css
runtime: shiny
---

Page 1 {data-orientation=rows}
=====================================

Row {.sidebar}
-----------------------------------------------------------------------
### Inputs 1

Row 
-----------------------------------------------------------------------

### Chart 1

### Chart 2
Row 
-----------------------------------------------------------------------

### Chart 3
Row 
-----------------------------------------------------------------------

### Chart 4

### Chart 5

我试图添加一个CSS类来添加严格的边栏，但无济于事。

任何帮助将不胜感激。

谢谢。

Answer 1

我认为grid布局将适合您的情况。

/* container */
.container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

/* sidebar */
.sidebar {
  background-color: #729fcf;
  grid-row-start: 1;
  grid-row-end: 4;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sidebar:first-of-type {
  grid-column-start: 1;
}

.sidebar:last-of-type {
  grid-column-start: 4;
}

.sidebar:first-of-type > span {
  transform: rotate(-90deg);
}

.sidebar:last-of-type > span {
  transform: rotate(90deg);
}

/* charts */
[class^="chart"] {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 5rem;
  border: 1px solid lightgrey;
}

[class^="chart"]:not(.chart-3) {
  background-color: #76ec9b;
}

.chart-3 {
  background-color: #ee6264;
  grid-column-start: 2;
  grid-column-end: 4;
}

.chart-1,
.chart-4 {
  margin-right: 0.1rem;
}

.chart-2,
.chart-5 {
  margin-left: 0.1rem;
}

<section class="container">
  <aside class="sidebar"><span>Inputs for charts 1 and 4</span></aside>
  <div class="chart-1">Chart 1</div>
  <div class="chart-2">Chart 2</div>
  <div class="chart-3">Chart 3</div>
  <div class="chart-4">Chart 4</div>
  <div class="chart-5">Chart 5</div>
  <aside class="sidebar"><span>Inputs for charts 2 and 5</span></aside>
</section>

Answer 2

我可以提供一般的解决方案。我建议更改现有主题，例如“流明”，以使其产生您想要的布局。您可以使用Griffon或类似的HTML编辑器来完成此操作。然后，在Rmarkdown中渲染时参考流明主题。见我的related answer here。

Answer 3

就这样：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css">
    <link rel="stylesheet" href="style.css">
    <title>Title</title>
</head>

<body>
    <div class="container">
        <div class="row" style="background-color: rgb(115, 115, 223); height: 300px; width: 600px; ">
            <div class="col-2 ">
                One of three columns
            </div>
            <div class="col-8">
                <div class="container">
                    <div class="row" style="background-color: lightgreen; height: 100px;">
                        <div class="col" style="border: 5px solid white;">
                            chart1
                        </div>
                        <div class="col" style="border: 5px solid white;">
                            chart2
                        </div>
                    </div>
                    <div class="row" style="background-color:rgb(221, 96, 96); height: 100px;">
                        <div class="col" style="border: 5px solid white;">
                            chart3
                        </div>
                    </div>

                    <div class="row" style="background-color: lightgreen; height: 100px;">
                        <div class="col" style="border: 5px solid white;">
                            chart4
                        </div>
                        <div class="col" style="border: 5px solid white;">
                            chart5
                        </div>

                    </div>

                </div>
            </div>
            <div class="col-2" style="rgb(115, 115, 223);;  height: 300px; ">
                One of three columns
            </div>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>

</html>

请参阅： https://jsfiddle.net/sugandhnikhil/86fojbdz/

CSS的编写时间会更长，请改用Bootstrap ！！！!!!

谢谢！！！

：-）

flexdashboard布局中的两个侧边栏

3 个答案: