R markdown 多列布局 - 如何使用 CSS 和 HTML 固定列的宽度<div>？

Question

亲爱的乐于助人的社区，

我花了几个小时试图找到一种方法，在 R markdown 中并排放置两个元素同时控制布局中列的宽度（用于 html 输出）。

我已经找到了这个线程并很快实现了它。但是，我不知道如何强制列宽为 10% 和 90%。

我想在一些文字旁边放置一个徽标。根据上述线程，我首先创建一行，并在其中嵌套两列。我知道

.column {flex;50%}

可能会影响我能做的事情，但我只是无法弄清楚我应该使用的语法。 对于一列中的两个文本块与另一列中的表格相邻的情况也是如此（理想情况下是宽度的 70% 和 30%）。

注意：我不想创建 .css 文件来设置样式，因为我需要将脚本应用到许多单独的结果文件，所以我需要一个简单的嵌入式解决方案。我不想要需要向同事复制/更新/解释的 .css 文件。

我尝试了我能找到的各种列宽语法，唯一有影响的语法，如此处建议，是编写

<div class = "col-4">

，但将数字更改为-1或-8并没有改变结果和列太大了，而另一个又缩小了。现在当我再次尝试时，它不再起作用了，我非常困惑。

此外，有趣的是，填充

style="padding-right:50px;"

语法有效，但宽度语法无效，例如

width = "block-size: 4000px;"

。

非常感谢您的帮助！

这是我的代码（抱歉，您必须用其他东西替换徽标）：

---
title: Report of analyses
output:
  html_document:
    theme: yeti
---

<style type="text/css">
   .main-container {max-width: 80%;}
   .row {display: flex;}
   .column {flex;50%}
</style>


<div class = "row">
<div class = "column">
![](C:/NKUA-logo-red.png){#id .class width=10% height=10%}
</div>

<div class = "column">
*I want this affiliation to be wider, like 90% of the total width with the logo to the left.*


Department of Clinical Therapeutics, 
<br> *Report author: Jane Doe, PharmD, PhD*
</div>
</div>

<div class = "row">
<div class = "column" style="padding-right:50px;">
*I want both these paragraphs 1.&2. to be wider, like 70% of the total width.*

### 1. Pathology interpretation
**Technical summary**: Lorem ipsum dolor sit amet

### 2. Case details and history
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
</div>

<div class = "column">
*I want this table to be more narrow to the right, like 30% of the total width.*

### 3. Information
```{r echo = FALSE}
library(kableExtra)
kbl(iris[1:10,])

Answer 1

您可以使用引导网格选项，即每行由十二个单元组成，您可以根据自己的喜好进行划分，例如

---
title: Report of analyses
output:
  html_document:
    theme: yeti
---

<div class = "row">
  
<div class = "col-md-1">
![](images/rstudio_logo.png){}
</div>

<div class = "col-md-11">

Department of Clinical Therapeutics, 
<br> *Report author: Jane Doe, PharmD, PhD*
</div>

</div>

<div class = "row">
<div class = "col-md-8" style="padding-right:50px;">
*I want both these paragraphs 1.&2. to be wider, like 70% of the total width.*

### 1. Pathology interpretation
**Technical summary**: Lorem ipsum dolor sit amet

### 2. Case details and history
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.  
</div>

<div class = "col-md-4">
*I want this table to be more narrow to the right, like 30% of the total width.*

### 3. Information
```{r echo = FALSE}
library(kableExtra)
kbl(iris[1:10,])

---

注意： 当您可以切换到四开时，更简单，请参阅此处了解四开的 css 网格。

Answer 2

PDF 需要另一种方式来实现，它使用 LaTeX。