html - 当我使用 pre 标签时内容重叠在另一个 div 上

Question

我的网页是这样的:

我正在尝试输入一些水平长度的代码块，如下所示:

<pre><code>
URL = "https://example.com/73876544657687988976987654465768798657687988976/"
</code></pre>

一旦我输入这个片段，主要的内容就会重叠在右边的部分。我希望我的内容保留在 main 中(如果 pre 中有溢出，可能会有滚动)

我已尝试修复包含主要内容(位置、重叠 x 等)的 div 的 CSS。

我不认为 pre 的 CSS 有问题(我正在使用 prism.css)，因为它在其他地方工作正常。

Answer 1

请看下面的例子。 默认情况下，overflow 属性是visible。我们需要将其设置为 auto 以便在溢出时出现滚动条(您的情况)。如果没有溢出，则不会出现滚动条。这意味着 auto。

要更好地理解它，请查看文档:https://www.w3schools.com/css/css_overflow.asp

.section{
  float: left;
  width: 20%;
  background-color: red;
}
.main{
  float: left;
  width: 60%;
  background-color: green;
  overflow: auto;
}

<div class='section'>
  section
</div>
<div class='main'>
  <pre>
    <code>
URL = "https://example.com/73876544657687988976987654465768798657687988976/"
    </code>
  </pre>
</div>
<div class='section'>
  section
</div>