如何在一行中有两个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 之间会有空间。

Answer 2

虽然 Flexbox 方法工作得非常好，但我想展示如何使用float.

这是CSS

.float--left {

  float: left

}

.float--right {

  float: right

}

.clear {

  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">

    <div class="left">

        Left Side

    </div>

    <div class="right">

        Right Side

    </div>

</div>

这是 CSS：

.content{

    display: flex;

}

.right{

    margin-left: auto;

}