[英]how to have one piece of text display on left hand side and the other on the right hand side of a div
I have a div with 2 pieces of text and I have some styling already but to make the text more readable I am wondering how to position one piece of text to the left-hand side and the other to the right-hand side.我有一个包含 2 段文本的 div,我已经有了一些样式,但为了使文本更具可读性,我想知道如何将 position 一段文本放在左侧,另一段放在右侧。
I am trying to position the left-text class to the left-hand side of the text-div class and the right-text to the right-hand side of the div does anyone know what I am missing right now the text is just one after the other on the left-hand side so displays like this ---> text1text2我正在尝试 position 左侧文本 class 到 text-div 的左侧 class 和右侧文本到 div 的右侧 有谁知道我现在缺少什么 文本只是一个在左侧之后的另一个显示如下 ---> text1text2
This is my component code:这是我的组件代码:
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>
)
here is the css so far:到目前为止,这是 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;
} }
You can achieve this by adding justify-content: space-between;
您可以通过添加justify-content: space-between;
来实现。 in .text-div
in CSS在 CSS 中的.text-div
中
.text-div {
display: flex;
align-items: center;
justify-content: space-between;
}
In your class of .text-div
, you can add justify-content: space-between;在.text-div
的 class 中,您可以添加justify-content: space-between; . .
.text-div {
display: flex;
align-items: center;
justify-content: space-between; /*Add this line.*/
}
Also, here is a some good documentation on flexbox I used when learning it.此外,这里有一些关于 flexbox 的很好的文档,我在学习它时使用过。
https://css-tricks.com/snippets/css/a-guide-to-flexbox/ https://css-tricks.com/snippets/css/a-guide-to-flexbox/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.