CSS. Позиционирование внутри заголовка h1...h6 и внутри div с помощью float

Рейтинг: 0Ответов: 1Опубликовано: 11.08.2023

Заголовок

<h4><span>Михаил</span><span>36 лет</span></h4>

Нужно "Михаил" оставить слева, а "36 лет" - справа.

И такой код:

h4>span:last-child {
  float: right;
}

.panel>div:last-child {
  float: right;
}

.sub-panel-1,
.sub-panel-2 {
  display: inline-block;
}
<section>
  <div class="row">

    <div class="col-lg-4 col-md-4">
      <h4>
        <span>Михаил</span><span>36 лет</span>
      </h4>
      <div class="panel">
        <div class="sub-panel-1">
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494464.png"></span>
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494467.png"></span>
        </div>
        <div class="sub-panel-2">
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494688.png"></span>
          <span><img src="https://cdn-icons-png.flaticon.com/64/4494/4494490.png"></span>
        </div>
      </div>
    </div>

    <div class="col-lg-4 col-md-4">
      ...
    </div>

  </div>
</section>

Надо ли делать очистку float? (вроде бы порядок на странице не нарушается)

css html float
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Нужно "Михаил" оставить слева, а "36 лет" - справа.

Предложу такой вариант...

h4 {
  display: flex;
  justify-content: space-between;
}
<h4><span>Михаил</span><span>36 лет</span></h4>

Без flex...

h4 > span:last-child {
  float: right;
}
<h4><span>Михаил</span><span>36 лет</span></h4>