如何在一行中有两个div。右边和左边

Question

<div className="content">
 <div style={{ float: "left" }}> {pedido.nombre}</div> //name
 <div style={{ float: "right" }}> ${pedido.precio}</div> //price
</div>

它应该在左侧显示名称，在右侧显示价格，但它保留在另一侧

在那里

Answer 1

关键是justify-content: space-between：

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

<div class="content">
  <div style="background: yellow">Product name</div>
  <div style="background: orange">Price</div>
</div>

两个 div 之间会有空间。