如何在一行中有两个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 {&nbsp; display: flex;&nbsp; justify-content: space-between;}<div class="content">&nbsp; <div style="background: yellow">Product name</div>&nbsp; <div style="background: orange">Price</div></div>两个 div 之间会有空间。

Answer 2

虽然 Flexbox 方法工作得非常好，但我想展示如何使用float.这是CSS.float--left {&nbsp; float: left}.float--right {&nbsp; float: right}.clear {&nbsp; clear: both;}和一些 HTML<div class="float--left">name</div><div class="float--right">price</div><div class="clear">other content</div>*注意：添加了如何使用清除将浮动行为重置回正常状态的示例*

Answer 3

Flexbox 将帮助您：这是 HTML：<div class="content">&nbsp; &nbsp; <div class="left">&nbsp; &nbsp; &nbsp; &nbsp; Left Side&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="right">&nbsp; &nbsp; &nbsp; &nbsp; Right Side&nbsp; &nbsp; </div></div>这是 CSS：.content{&nbsp; &nbsp; display: flex;}.right{&nbsp; &nbsp; margin-left: auto;}