主页 / 问题 / 1535316
Accepted
chbronson
Asked:2023-08-11 14:43:20 +0000 UTC2023-08-11 14:43:20 +0000 UTC

CSS。定位在 h1...h6 标题内和带浮动的 div 内

  • 772

标头

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

您需要将“Mikhail”留在左侧，将“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>

我需要清理浮子吗？（看来页面顺序并没有违反）

html

1 个回答

  1. Best Answer

    您需要将“Mikhail”留在左侧，将“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>

    • 2

相关问题