Question

我正在使用ASP MVC和Bootstrap中的一个项目，我需要显示变压器的规定，这可用以下方式表示：

我试图通过以下方式实现，但我没有达到我想要的结果：

＆＃13;

<table>
  <tr>
    <td rowspan="2">132 &#177;</td>
    <td>12x1,5 %</td>
  </tr>
  <tr style="margin-top: 0px;">
    <td>8x1.5%</td>
  </tr>
</table>

＆＃13;

Answer 1

您正在使用rowspan与表格的正确轨道。我使用下面的示例完成了它，并且最好使用monospace字体。

＆＃13;

table {
  font-family: monospace;
}

td[rowspan] {
  font-size: 1.5em;
}

＆＃13;

<table>
  <tr>
    <td rowspan="2">(132</td>
    <td>+ 12x1,5 %</td>
    <td rowspan="2">)/13,86kV</td>
  </tr>
  <tr>
    <td>- 8x1.5 %</td>
  </tr>
</table>

＆＃13;

Answer 2

您可以从以下内容开始：

＆＃13;

.txt{ height: 40px; display: table-cell; vertical-align: middle; }
.supsub { display: inline-block; }
.supsub sub { top: .3em !important; }
.op {  font-size: 36px }
.supsub sup, .supsub sub {
    position: relative;
    display: block;
    font-size: .8em !important;
    line-height: 1.2;
}

＆＃13;

<span class="main">
    <span class="op">(</span>
    <span class="txt">
        132
    </span>
    <span class="supsub">
        <sup>&#43; 12x1,5 %</sup>
        <sub>&#8722; 8x1.5%</sub>
    </span>
    <span class="op">)/</span>
    <span class="txt">
        13,86 KV
    </span>
</span>

＆＃13;

Answer 3

您可以尝试类似于我发布的内容。如果您只需要做一次或两次这样的事情就会让您满意。如果你需要经常使用数学/科学符号，它可能不实用。

＆＃13;

* {
  padding:0;
  margin:0;
  box-sizing:border-box;
  text-align:center;
}

.container {
  width:250px;
  height:75px;
  display:flex;
  flex-direction:row;
  align-items:center;
}

.left {
  display:flex;
  flex:1;
  height:100%;
  align-items:center;
  justify-content:center;
}

.top-bottom {
  display:flex;
  flex:1;
  height:100%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.top {
    display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:50%;
}

.bottom {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:50%;
  border-top:1px solid green;
}

.right {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  height:100%;
}

＆＃13;

<div class="container">
  <div class="left">132 &#177;
  </div>
  <div class="top-bottom">
      <div class="top">12 &times; 1.5%
      </div>
      <div class="bottom">8 &times; 1.5%
      </div>
  </div>
    <div class="right">/ 13.86kV
    </div>
  </div>

＆＃13;

试图在html中的一行内显示两行

3 个答案: