如何在R Markdown中用CSS和HTML <div>固定多列布局宽度？

直接用自定义Flex布局就能解决你的问题，下面是具体实现步骤和代码示例：

核心思路 #

通过内嵌<style>标签定义Flex容器和固定宽度的列类，用flex: 0 0 X%强制锁定列宽，避免被内容撑开或继承样式干扰。

步骤1：添加内嵌CSS #

在R Markdown文档的任意位置（建议放在开头或标题下方）插入以下CSS代码：

<style>
/* Flex容器：确保子元素并排 */
.flex-row {
  display: flex;
  width: 100%; /* 容器占满父元素宽度 */
  gap: 1rem; /* 列之间的间距，可按需调整 */
}

/* 自定义列宽类 */
.col-10 { flex: 0 0 10%; min-width: 0; }
.col-90 { flex: 0 0 90%; min-width: 0; }
.col-70 { flex: 0 0 70%; min-width: 0; }
.col-30 { flex: 0 0 30%; min-width: 0; }

/* 可选：给列加边框，方便调试列宽 */
.flex-row div { border: 1px solid #eee; padding: 0.5rem; }
</style>

• flex: 0 0 X%：第一个0表示不放大，第二个0表示不缩小，X%是固定宽度比例，彻底锁定列宽。
• min-width: 0：防止列内长文本/图片溢出时撑开列宽，破坏比例。

步骤2：实际使用示例 #

示例1：Logo（10%）+ 文本（90%） #

---
title: "并排元素示例"
output: html_document
---

<!-- 先插入上面的内嵌CSS -->
<style>
.flex-row {
  display: flex;
  width: 100%;
  gap: 1rem;
}
.col-10 { flex: 0 0 10%; min-width: 0; }
.col-90 { flex: 0 0 90%; min-width: 0; }
.flex-row div { border: 1px solid #eee; padding: 0.5rem; }
</style>

## Logo + 文本并排

<div class="flex-row">
  <div class="col-10">
    <!-- 替换成你的Logo路径 -->
    ![Logo示例](https://via.placeholder.com/80)
  </div>
  <div class="col-90">
    <h3>项目标题</h3>
    <p>这是占90%宽度的文本区域，不管内容多少，列宽都会保持10%/90%的比例，超出内容自动换行。</p>
  </div>
</div>

示例2：文本（70%）+ 表格（30%） #

## 文本 + 表格并排

<div class="flex-row">
  <div class="col-70">
    <h3>数据说明</h3>
    <p>这是占70%宽度的文本列，可放置详细说明、列表或其他内容。</p>
    <ul>
      <li>数据统计周期：2024年1-6月</li>
      <li>样本量：1000+</li>
    </ul>
  </div>
  <div class="col-30">
    <h3>核心数据</h3>
    ```{r, echo=FALSE}
    # 生成示例表格
    data.frame(
      类别 = c("A", "B", "C"),
      数值 = c(120, 85, 98)
    )
    ```
  </div>
</div>

为什么之前的方法没生效？ #

1. Bootstrap col类问题：默认的col类依赖row容器，且基于12列栅格（比如col-1≈8.33%，无法精准匹配10%），同时如果自定义样式覆盖了Bootstrap的flex属性，就会失效。
2. 直接设置width无效：如果元素是display: block，没有父容器的布局约束，width会被内容撑开，无法保持固定比例。而Flex布局的flex: 0 0 X%是强制锁定宽度，不受内容影响。

可选：响应式适配（小屏幕自动堆叠） #

如果需要在手机等小屏幕上让列自动堆叠，在CSS里添加媒体查询：

@media (max-width: 768px) {
  .flex-row {
    flex-direction: column; /* 小屏幕下垂直排列 */
  }
  .col-10, .col-90, .col-70, .col-30 {
    flex: 0 0 100%; /* 占满宽度 */
  }
}

内容的提问来源于stack exchange，提问作者Julie Courraud