R markdown 多列布局 - 如何使用 CSS 和 HTML 固定列寬<div> ？</div><div id="text_translate"><p> 親愛的樂於助人的社區，</p><p> 幾個小時以來，我一直在嘗試找到一種方法，將兩個元素並排放置在 R markdown<strong>中，同時控制布局中列的寬度</strong>（對於 html 輸出）。</p><p> 我<a href="https://community.rstudio.com/t/rmarkdown-place-figure-and-table-side-by-side-in-html-document/146181" rel="nofollow noreferrer">找到了這個線程</a>並非常快地實現了它。 但是，我不知道如何強制列寬為 10% 和 90%。</p><p> 我想在一些文本旁邊放一個標志。 根據上述線程，我首先創建一行，並在其中嵌套兩列。 我知道.column {flex;50%}可能會影響我能做什么，但我只是想不出我應該使用的語法。 同一列中的兩個文本塊位於另一列中的表格旁邊（理想情況下為寬度的 70% 和 30%）。</p><p> 注意：我寧願不必為樣式創建 .css 文件，因為我需要將腳本應用於許多單獨的結果文件，所以我需要一個簡單的嵌入式解決方案。 我不想要需要向同事復制/更新/解釋的 .css 文件。</p><p> 我嘗試了所有我能找到的列寬語法，唯一有影響的是，<a href="https://getbootstrap.com/docs/4.0/layout/grid/" rel="nofollow noreferrer">正如此處所建議的那樣</a>，正在編寫<div class = "col-4">但將數字更改為 -1 或 -8 並沒有改變結果和專欄太大了，另一個太小了。 現在我再試一次，它不再起作用了，我非常困惑。</p><p> 另外，有趣的是 padding style="padding-right:50px;" 語法有效，但寬度語法無效，例如width = "block-size: 4000px;" .</p><p> 非常感謝您的幫助！</p><p> 這是我的代碼（抱歉，您必須用其他東西替換徽標）：</p><pre> --- 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,])</pre><pre></pre></div>

Question

親愛的樂於助人的社區，

幾個小時以來，我一直在嘗試找到一種方法，將兩個元素並排放置在 R markdown中，同時控制布局中列的寬度（對於 html 輸出）。

我找到了這個線程並非常快地實現了它。 但是，我不知道如何強制列寬為 10% 和 90%。

我想在一些文本旁邊放一個標志。 根據上述線程，我首先創建一行，並在其中嵌套兩列。 我知道.column {flex;50%}可能會影響我能做什么，但我只是想不出我應該使用的語法。 同一列中的兩個文本塊位於另一列中的表格旁邊（理想情況下為寬度的 70% 和 30%）。

注意：我寧願不必為樣式創建 .css 文件，因為我需要將腳本應用於許多單獨的結果文件，所以我需要一個簡單的嵌入式解決方案。 我不想要需要向同事復制/更新/解釋的 .css 文件。

我嘗試了所有我能找到的列寬語法，唯一有影響的是，正如此處所建議的那樣，正在編寫<div class = "col-4">但將數字更改為 -1 或 -8 並沒有改變結果和專欄太大了，另一個太小了。 現在我再試一次，它不再起作用了，我非常困惑。

另外，有趣的是 padding 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

您可以使用bootstrap grid options ，即每行由十二個單元組成，您可以根據自己的喜好進行划分，例如

---
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 網格。