如何使两个 <pre> 标签变得相同大小？答案

【问题标题】：How do I make two <pre> tag become same size?如何使两个 <pre> 标签变得相同大小？
【发布时间】：2020-06-12 04:45:53
【问题描述】：

这是我的代码：

table += '<tr>';
table += '<td width="800px" style="vertical-align:top"><pre>' + rqParam + '</pre></td>';
table += '<td width="800px" style="vertical-align:top"><pre>' + resParam + '</pre></td>';
table += '</tr>';

我使用变量表来生成我想要的表 result.

似乎预大小将取决于里面的值，但我想要的是使较小的尺寸与较大的尺寸相同。

你们能建议我使用哪种样式来动态使其大小相同吗？

【问题讨论】：

您也应该将width 提供给pre。
pre 应该总是和 td 一样大小吧？
没有 CSS 可以使一个 TD 中的元素与另一个 TD 中的元素具有相同的高度。但是，您可以将font-family: monospace; white-space:pre 应用于 TD 本身，然后您就可以省去 pre 元素。

标签： html css tags pre

【解决方案1】：

使用 Flex 元素可以轻松解决这个问题，而不是使用表格。以下代码显示了一个工作示例 - 我在 pre 元素周围添加了一个边框，以明确它们的大小相同。

<html>
<head></head>
<body>
  <div style="width: 100%; display: flex; flex-flow: row nowrap; justify-content: center; align-content: center; align-items: stretch;">
    <div style="display: flex; flex-grow: 1;">
      <pre style="border: 1px solid red; width: 100%;">test string</pre>
    </div>
    <div style="flex-grow: 1;">
      <pre style="border: 1px solid red; width: 100%;">test string<br>test string<br>test string</pre>
    </div>
  </div>
</body>
</html>

【讨论】：