css 如何在Tibco Spotfire中创建一个HTML代码来将两个盒子一个放在另一个上面？

yzuktlbb 于 2023-04-01 发布在其他

关注(0)|答案(1)|浏览(143)

我想用这个特定的outlook创建一个文本框：
Desired Outlook
但是我找不到关于如何做的资源。有什么帮助吗？还有如何制作这样的文本框，里面有文本的正方形。特别是，我有改变这些框的大小（高度和宽度）的问题。即使我特别提到它，它也不会改变
在我自己，我只能写出一些基本的HTML：

<html>
  <head>
    <title>My HTML Page</title>
    <style>
      .title {
        color: white;
        font-weight: bold;
    text-align: center;
      }
      .object {
        display: inline-block;
        vertical-align: top;
        margin-right: 20px;
      }
    </style>
  </head>
  <body>
    <div class="object">
      <h2 class="title">Cluster</h2>
      <p><SpotfireControl id="b4969e13ff1449ebb42b49e887569e91" /></p>
    </div>
  </body>
</html>

css

来源：https://stackoverflow.com/questions/75877740/how-to-create-an-html-code-to-place-two-boxes-one-above-the-other-in-tibco-spotf

1条答案

按热度按时间

fkaflof61#

在下面的代码中，注意使用margin: auto。你也可以在obj1和obj2中改变height。例如使用一些其他的单位，如rem，em，%等...

<html>
  <head>
    <title>My HTML Page</title>
    <style>
      .title {
        background-color: black;
        color: white;
        margin:auto;
      }
      .mainBox {
        display: flex;
        width: 100%; 
        background-color: pink;
      }
      .obj1 {
        width: 50%;
        height: 600px;
        background-color: red;
        text-align: center;
        
      }
       .obj2 {
        width: 100%;
        height: 300px;
        background-color: green;
      }
    </style>
  </head>
  <body>
    <div class="mainBox">
        <div class='obj1'>
            <h1 class='title'>Amir</h1>
        </div>
        <div class='obj1'>
            <div class='obj2'>
                <h1 class='title'>Amir</h1>
            </div>
            <div class='obj2'>
                <h1 class='title'>Amir</h1>
            </div>
        </div>
    </div>
  </body>
</html>

如果你想了解更多关于布局的知识，可以学习一些文章和文档，比如this article。

赞(0）回复(0）举报 2023-04-01

我来回答

css 如何在Tibco Spotfire中创建一个HTML代码来将两个盒子一个放在另一个上面？

1条答案

相关问题

热门标签

最新问答