获取示例图像中的 HTML 样式答案

【问题标题】：Get HTML style like in example image获取示例图像中的 HTML 样式
【发布时间】：2018-02-12 14:21:16
【问题描述】：

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

这是我目前得到的代码，但 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>

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

【问题讨论】：

你为什么到处都使用固定位置？你应该从头开始使用三个块和 flexbox
能否请您添加一个小例子sn-p？ @Axnyff
codepen.io/anon/pen/YeQzYq
@JaneDeverly 使用 position fixed 会使元素即使在滚动时也会卡在原来的位置，所以如果添加更多元素，则会妨碍其他元素

标签： javascript html css styles

【解决方案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>

【讨论】：

感谢您使用样式表而不是内联所有样式！
谢谢看起来不错的解决方案：9

【解决方案2】：

其他方法。

.container{
   position: fixed; 
   width:100%; left:0%; 
   top: 0%; 
   background: #795547; 
   box-shadow: 0px 0px 2px 0px #795547;
}

.detail{
 color: white; 
 display: inline-block; 
 font-size: 25px;
 width: 32%;
}

.header{
   color: white; 
   display: inline-block; 
   font-size: 11px;
   width: 32%;
}

.row{
  width: 100%;
  text-align: center;
}

<div class="container">
   <div class="row">
        <div class="header">TRUE HEADING</div>
        <div class="header">MAGNETIC HEADING</div>
        <div class="header">MAGNETIC FIELD</div>
   </div>
   <div class="row">
        <div class="detail">135° SE</div>
        <div class="detail">123° SE</div>
        <div class="detail">135° SE</div>
   </div>
</div>

【讨论】：

【解决方案3】：

.wrapper{
	position: fixed; 
	width:100%; h
	eight: 22%; 
	left:0%; 
	top: 0%; 
	background: #795547; 
	box-shadow: 0px 0px 2px 0px #795547; 
	display: table; 
	justify-content: space-between;
}
.column{
	color: white; 
	display:table-cell; 
	font-size: 11px;
    padding:10px;
	text-align: center;
    vertical-align: middle;
}
.column .bigger{
	font-size: 24px;
}

<div class="wrapper">
	<div class="column">
		TRUE HEADING
		<div class="bigger">135° SE</div>
	</div>
	<div class="column">
		MAGNETIC HEADING
		<div class="bigger">123° SE</div>
	</div>
	<div class="column">
		MAGNETIC FIELD
		<div class="bigger">49 uT</div>
	</div>
</div>

【讨论】：