javascript - 获取示例图像中的 HTML 样式

Question

我想创建一个如下所示的元素:

这是我目前得到的代码，但 Id 似乎不是这样工作的:

<div style="position: fixed; width:100%; height: 22%; left:0%; top: 0%; background: #795547; box-shadow: 0px 0px 2px 0px #795547; display: flex; justify-content: space-between;">
        <div style="color: white; left: 3%; margin-top: 3%; position: fixed; font-size: 11px">TRUE HEADING</div>
        <div style="color: white; display: table; margin:0 auto; margin-top: 3%;  font-size: 11px">MAGNETIC HEADING</div>
        <div style="top: 0%; color: white; right: 3%; margin-top: 3%; position: fixed; font-size: 11px">MAGNETIC FIELD</div>

        <div style="position: fixed; left: 3%; margin-top: 2%; color: white; font-size: 14px">135° SE</div>
        <div style="position: fixed; margin-top: 2%; margin: 0 auto; color: white; font-size: 14px">123° SE</div>
        <div style="position: fixed; right: 2%; margin-top: 2%; color: white; font-size: 14px">49 uT</div>
</div>

如何编辑我的代码以获得如上所示的结果？

Answer 1

这是另一个使用 flex 布局的实现

.container {
display: flex;
 flex-direction: row;
 background: #795547;
 color: white;
 box-shadow: 0px 0px 2px 0px #795547;
}

.flex {
  padding: 2%;
  flex: 1
}

.title , .desc {
 text-align: center
}

.desc {
 font-size: 25px;
}

<div class="container">
<div class="flex">
  <div class="title">TRUE HEADING</div>
  <div class="desc">135° SE</div>
</div>

<div class="flex">
  <div class="title">MAGNETIC HEADING</div>
  <div class="desc">123° SE</div>
</div>

<div class="flex">
  <div class="title">MAGNETIC FIELD</div>
  <div class="desc">49 uT</div>
</div>

</div>