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

【问题标题】：How to have two divs in one line. right and left如何在一行中有两个 div。右边和左边
【发布时间】：2023-03-24 17:16:01
【问题描述】：

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

左侧应该是名称，右侧是价格，但它保持在另一侧

就在那儿

【问题讨论】：

flexbox.io
stackblitz.com/edit/typescript-apbokz?file=index.html 如果它真的需要“浮动”。否则，请使用 Robert 和 azium 建议的 flex - 另请参阅本指南：css-tricks.com/snippets/css/a-guide-to-flexbox
So none of these worked for you?
这能回答你的问题吗？ how to place two divs besides each other

标签： html css

【解决方案1】：

试试这个 CSS：

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

这样，两个 div 之间会有空间，看起来应该不错。

【讨论】：

我不知道怎么做，抱歉，这个很菜鸟
@Drokoz 看看here 如果您不知道如何将 css 文件导入到您的组件中，或者直接这样做：
您是否删除了“float: left”和“float: right”？试试这个方法。
不，我尝试了很多东西，我也有一个手风琴，它不起作用。但只是在那一部分
它现在可以工作了，我删除了上面的一个 div。非常感谢！！我真的很感激！

【解决方案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>

*注意：添加了一个如何使用 clear * 将浮动行为重置为正常的示例

【讨论】：