Quarto 嵌入式 HTML 渲染创建额外的容器

Question

我的 .qmd 文件中有以下代码。我正在使用嵌入式 html 创建一些图块，每个图块包含一张图片和一个标题。单击该图块应将您带到四开本网站上的页面。现在，向容器添加标题会在图块列表的末尾创建一个空白图块，其 url 与最终图块相同。删除标题行可以修复此错误。

仅在浏览器中打开 html 即可使标题正确呈现（无需附加磁贴）。谁能解释为什么会发生这种情况？蒂亚！

包含“标题”行不会创建额外的空白图块。

---
title: "test"
format: html
editor: visual
---

test test test

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .tile {
        width: 250px;
        height: 250px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        transition: background-color 0.3s, transform 0.3s;
        border-radius: 15px;
    }
    .tile:hover {
        background-color: #e0e0e0;
        transform: scale(1.05);
    }
    .image {
        width: 150px;
        height: 150px;
        margin: auto;
        transition: transform 0.3s;
        filter: invert(41%) sepia(37%) saturate(562%) hue-rotate(163deg) brightness(86%) contrast(86%);
    }
    .title {
        margin-top: auto;
        padding: 10px;
        background-color: #f0f0f0;
        width: 100%;
        border-radius: 0px 0px 15px 15px; /* Rounded edges */
    }
</style>

<div class="container">
  <a href="link1.com" class="tile">
    <img src="images/icons/data-life-cycle.svg" alt="Data Life Cycle" class="image">
    <div class="title">Data Life Cycle</div>
  </a>
  <a href="perspectives/your-role.qmd" class="tile">
      <img src="images/icons/your-role.svg" alt="Your Role" class="image">
      <div class="title">Your Role</div>
  </a>
  <a href="perspectives/data-domain.qmd" class="tile">
      <img src="images/icons/data-domain.svg" alt="Your Domain" class="image">
      <div class="title">Your Domain</div>
  </a>
  <a href="perspectives/your-tasks.qmd" class="tile">
      <img src="images/icons/your-tasks.svg" alt="Your Tasks" class="image">
      <div class="title">Your Tasks</div>
  </a>
  <a href="perspectives/recommended-tools.qmd" class="tile">
      <img src="images/icons/recommended-tools.svg" alt="Recommended Tools" class="image">
      <div class="title">Recommended Tools</div>
  </a>
  <a href="perspectives/national-and-regional-resources.qmd" class="tile"> 
    <img src="images/icons/national-and-regional-resources.svg" alt="National and Regional Resources" class="image">
    <div class="title">National and Regional Resources</div> <!-- Removing these title lines fixes the issue. Why? -->
  </a>
</div>

# More text 

test test 

Answer 1

将代码放入原始 HTML 块中，以便在渲染时不会对其进行解析。

---
title: "test"
format: html
editor: visual
---

test test test

```{=html}

<style>
    .container {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        justify-content: center;
    }
    .tile {
        width: 250px;
        height: 250px;
        border: 1px solid #ccc;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        transition: background-color 0.3s, transform 0.3s;
        border-radius: 15px;
    }
    .tile:hover {
        background-color: #e0e0e0;
        transform: scale(1.05);
    }
    .image {
        width: 150px;
        height: 150px;
        margin: auto;
        transition: transform 0.3s;
        filter: invert(41%) sepia(37%) saturate(562%) hue-rotate(163deg) brightness(86%) contrast(86%);
    }
    .title {
        margin-top: auto;
        padding: 10px;
        background-color: #f0f0f0;
        width: 100%;
        border-radius: 0px 0px 15px 15px; /* Rounded edges */
    }
</style>

<div class="container">
  <a href="link1.com" class="tile">
    <img src="images/icons/data-life-cycle.svg" alt="Data Life Cycle" class="image">
    <div class="title">Data Life Cycle</div>
  </a>
  <a href="perspectives/your-role.qmd" class="tile">
      <img src="images/icons/your-role.svg" alt="Your Role" class="image">
      <div class="title">Your Role</div>
  </a>
  <a href="perspectives/data-domain.qmd" class="tile">
      <img src="images/icons/data-domain.svg" alt="Your Domain" class="image">
      <div class="title">Your Domain</div>
  </a>
  <a href="perspectives/your-tasks.qmd" class="tile">
      <img src="images/icons/your-tasks.svg" alt="Your Tasks" class="image">
      <div class="title">Your Tasks</div>
  </a>
  <a href="perspectives/recommended-tools.qmd" class="tile">
      <img src="images/icons/recommended-tools.svg" alt="Recommended Tools" class="image">
      <div class="title">Recommended Tools</div>
  </a>
  <a href="perspectives/national-and-regional-resources.qmd" class="tile"> 
    <img src="images/icons/national-and-regional-resources.svg" alt="National and Regional Resources" class="image">
    <div class="title">National and Regional Resources</div> <!-- Removing these title lines fixes the issue. Why? -->
  </a>
</div>

```

# More text 

test test