плавать прямо на 2 элемента span в блоке h1 - PullRequest
0 голосов
/ 02 ноября 2018

Мне немного любопытно понять, как работает выравнивание в CSS3, приведенный ниже HTML-код использует float right

 <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;
}

Это дает мне вывод, как показано ниже, где метка Sunset появляется после Sunset Time, вместо этого должна быть до Sunset Time, сейчас я могу исправить в эмуляторе, переупорядочив, но не уверенный, если поведение остается согласованным на всех устройствах, работает ли float right в обратном порядке, пожалуйста, объясните, пожалуйста, также предложите лучший способ сделать то же самое. sunrise & sunset timings

1 Ответ

0 голосов
/ 02 ноября 2018

Прежде всего, использование float не использует преимущества CSS3, это было задолго до этого. Кроме того, можно использовать элемент h2 для заголовка, но в данном примере семантически неправильно использовать элемент заголовка, поскольку это не просто заголовок, который вы показываете.

Используя display: flex; и margin-left: auto; на правом элементе, он всегда будет отображаться наиболее далеко справа от доступного пространства (см. Пример ниже). Вы также можете использовать justify-content: space-between; для этого. Пожалуйста, прочитайте больше об этом в 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...