如何使两个<pre>标签变成相同大小?

问题描述 投票:0回答:1

下面是我的代码。

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>';

我使用变量table来生成一个表格,我想把它作为 "标签"。结果.

好像前期的大小要看里面的数值,但是我想的是让小的和大的大小一样。

你们能不能给我个建议,我需要用哪种样式来让它动态地变成一样的大小?

html css tags pre
1个回答
0
投票

而不是使用一个表,它可以很容易地解决使用的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>
© www.soinside.com 2019 - 2024. All rights reserved.