如何在Tibco Spotfire中用HTML实现上下盒子布局及自定义文本框

针对你需要的方形文本框（带内部文本、可固定宽高、上下排列），修改后的HTML代码如下：

<html>
  <head>
    <title>My HTML Page</title>
    <style>
      .title {
        color: white;
        font-weight: bold;
        text-align: center;
        margin: 0; /* 移除默认间距，让标题紧贴盒子顶部 */
        padding: 10px 0; /* 给标题加内边距，避免紧贴边框 */
      }
      .object {
        width: 200px; /* 固定宽度，可按需调整数值 */
        height: 150px; /* 固定高度，可按需调整数值 */
        background-color: #336699; /* 设置盒子背景色，可自定义 */
        border: 2px solid #1a334d; /* 增加边框强化方形视觉 */
        margin-bottom: 15px; /* 控制上下盒子的间距 */
        box-sizing: border-box; /* 确保内边距和边框不超出设定宽高 */
      }
      .control-wrap {
        padding: 0 10px; /* 给Spotfire控件添加左右内边距 */
        color: white; /* 控件文本颜色，按需调整 */
      }
    </style>
  </head>
  <body>
    <!-- 第一个文本框 -->
    <div class="object">
      <h2 class="title">Cluster</h2>
      <div class="control-wrap">
        <SpotfireControl id="b4969e13ff1449ebb42b49e887569e91" />
      </div>
    </div>
    <!-- 第二个文本框 -->
    <div class="object">
      <h2 class="title">Second Box</h2>
      <div class="control-wrap">
        <SpotfireControl id="替换为你的第二个控件ID" />
      </div>
    </div>
  </body>
</html>

核心修改说明： #

• 给.object类添加width和height属性，直接固定文本框尺寸，解决无法调整宽高的问题
• 通过background-color和border属性实现方形盒子的视觉效果
• 移除原代码的inline-block属性，利用块级元素默认上下排列的特性实现布局，同时用margin-bottom控制盒子间距
• 加入box-sizing: border-box，确保内边距和边框不会撑开盒子超出设定尺寸
• 调整标题和控件的边距、内边距，优化内容在盒子内的排版

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