Question

我想要这个

.--------------------------------------.
| Left                           Right |
'--------------------------------------'

一种解决方案（使用Bootstrap）是：

<div class="row">
    <div class="col ">
        Left
    </div>
    <div class="col text-right">
        Right
    </div>
</div>

有没有更简单的方法？

<div>
Left <span class="hfill">Right</span>
</div>

Answer 1

使用引导程序4

<div class="d-flex justify-content-between">
    <div>Left</div>
    <div>Right</div>
</div>

没有引导程序

.someClass {
   display: flex;
   justify-content: space-between;
}

<div class="someClass">
  <div>Left</div>
  <div>Right</div>
</div>

Answer 2

您可以使用CSS Float

<div class="row">
    <div class="col div-left">
        Left
    </div>
    <div class="col div-right">
        Right
    </div>
</div>

<style>
.div-left {
    float: left;
}

.div-right {
    float: right
}
</style>

或者：

<div class="row">
    <div class="col" style="float: left">
        Left
    </div>
    <div class="col" style="float: right">
        Right
    </div>
</div>

您还可以使用FlexBox

<div class="row">
  <div class="col">
    Left
  </div>
  <div class="col">
    Right
  </div>
</div>

<style>
.row {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>

您还可以使用CSS Grid

<div class="row">
  <div class="col div-left">
    Left
  </div>
  <div class="col div-right">
    Right
  </div>
</div>

<style>
.row {
  width: 100%;
  display: grid;
  grid-template-rows: 1fr 1fr;
}
.div-left {
  grid-column: 1;
}
.div-right {
  grid-column: 2;
  text-align: end;
}
</style>

如何在CSS中向右刷新文本？

2 个答案: