html - 如何通过中间在同一行上设置两个 block ？

Question

我需要将第一个 block 的内容 float 到左侧，将右侧 block 的内容 float 到右侧:

<div>
  <div>A</div>
  <div>B</div>
</div>

我需要得到这个:

    _______________
    A_____________B

但现在我得到:

___________________
A               
                  B
__________________

Answer 1

使用 flex 盒子

.container {
  display: flex;
  justify-content: space-between;
  width: 25%;
  border-top: thin solid darkgray;
  border-bottom: thin solid darkgray;
}

<div class="container">
  <div>A</div>
  <div>B</div>
</div>