在h1区块的2个跨度项目上右浮动

Question

我不太想知道对齐方式如何在CSS3中工作，下面的html代码使用右对齐

 <h2><span class='title'>Sunrise: </span><span class='sunrise'>{{sunrise}}</span><span class='title right'>  Sunset: </span><span class='sunset right'>{{sunset}}</span></h2>

这是CSS的外观

.title {
    font-weight: bold;
}
.sunrise {
   font-weight: bold;
   color: blue;
}
.sunset {
   font-weight: bold;
   color: blue;
}
.right {
    float: right;
}

它给我类似下面的输出，其中日落标签在日落时间之后出现，而应该在日落时间之前出现，现在我可以通过重新排序来修复模拟器，但不确定行为是否在所有设备上都保持一致，是否可以正确浮动以相反的顺序，请解释，也请提出一种更好的css方法。

Answer 1

首先，使用float并没有利用CSS3的好处，它早已存在。除此之外，可以使用h2元素作为标题，但是在此示例中，使用标题元素在语义上是不正确的，因为它不仅仅是显示的标题。

在右边的元素上使用display: flex;和margin-left: auto;，它将始终显示在可用空间的最右边（请参见下面的示例）。您也可以使用justify-content: space-between;进行此操作。请详细了解at MDN。

我添加了datetime属性，使时间机器可读。

.heading {
  display: flex;
}

.sunset {
  margin-left: auto;
}

<div class="heading">
  <div class="sunrise">
    <time datetime="17:01">17.01</time>
  </div>
  <div class="sunset">
    <time datetime="17:11">17.11</time>
  </div>
</div>