如何让一段文本显示在div的左侧，另一段显示在右侧

Question

我有一个有2段文本的div，我已经有了一些样式，但为了使文本更具可读性，我想知道如何将一段文本放置在左侧，另一段放置在右侧。

我正试图将left-text类定位到text-div类的左侧，将right-text类定位到div的右侧，有人知道我现在缺少什么吗?文本只是一个接一个地在左侧，所以显示像这样——>text1text2

这是我的组件代码:

return (
<div className="container-one">
<div className="container-two">
<Comp/> 
</div>
<div className="text-div">
<span className="left-text">{text1}</span>
<span className="right-text">{text2}</span>
</div>
</div>        
)

下面是目前为止的CSS:

.left-text{
float: left;
text-align: left;
}
.right-text {
float: right;
text-align: right;
}
.text-div {
display: flex;
align-items: center;
}
.container-two {
width: 100%;
border-radius: 9px;
margin-bottom: 9px;
}
.container-one {
width: 100%;
font-size: 12px;
flex: 0 0 auto;

display: flex;

flex-direction: column;

position: relative;

}

Answer 1

您可以通过在CSS

的.text-div中添加justify-content: space-between;来实现这一点

.text-div {
display: flex;
align-items: center;
justify-content: space-between;
}

Answer 2

在你的.text-div类中，你可以添加justify-content: space-between;.

.text-div {
display: flex;
align-items: center;
justify-content: space-between; /*Add this line.*/
}

此外，这里有一些很好的文档，我在学习flexx时使用。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/