我希望在这里提供一些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类来添加严格的边栏,但无济于事。
任何帮助将不胜感激。
谢谢。
最佳答案
我认为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>
关于css - flexdashboard布局中的两个侧边栏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53805775/