Css ReactJS：如何放置我的浮动元素textB和我的首字母'；s将text-textA-放在同一基线上？

下面是演示：

我希望这两个文本在同一基线上。我曾尝试使用垂直对齐和其他属性，但到目前为止，我无法实现相同基线的渲染

类应用程序扩展了React.Component{
render（）{
返回(
textA{“}
textB
);
}
}
ReactDOM.render（，document.getElementById（'root'））
.component{
文本对齐：居中；
填充：50px；
}
.text_a{
字号：5em；
}
.text_b{
/*宽度：100%*/
浮动：对；
/*位置：绝对位置*/
右：3vw；
/*保证金权利：5vw*/
/*利润上限：7.5vh*/
/*位置：相对位置*/
/*浮动：对；
明确：两者皆有*/
/*右侧填充：10vw*/
/*垂直对齐：中间对齐*/
字体大小：0.60em；
颜色：rgb（54,0,18）；
}
您可以使用flex并将项目与基线对齐

.text_a{
  display: flex;
  align-items: baseline;
  font-size:5em;
}

垂直对齐
不适用于块样式元素。以下是关于这方面的补充信息：

编辑：
再看看您的代码，这些元素应该已经使用默认样式与基线对齐。您仍然可以使用flex，但只需删除
浮动
也可以

.text_a {
  font-size: 5em;
}

.text_b {
  font-size: 0.60em;
  color: rgb(54, 0, 18);
}

将css属性行高度添加到文本

.text_b {
    line-height: 110px; /* adjust according to your need */
}

参考：
试试这个

text_a{
position:relative
}

因为h3有一些默认的样式，所以覆盖它会变得很乏味。从
中删除浮动。text\u b
并给它一个
左边距：3vw
：


类应用程序扩展了React.Component{
render（）{
返回(
textA{“}
textB
);
}
}
ReactDOM.render（，document.getElementById（'root'））
.component{
文本对齐：居中；
填充：50px；
}
.text_a{
字号：5em；
}
.text_b{
左边距：3vw；
字体大小：0.60em；
颜色：rgb（54,0,18）；
}
我的解决方案：使用一个带有flex显示的容器（多亏了sallf的创意），然后对齐基线上的所有项目，然后使用flex在项目之间分配空间，从而允许在屏幕右侧边缘保留我的文本B

此处演示：

ReactJS的代码片段：

import React, { Component } from 'react';
import { render } from 'react-dom'; 
import './style.css';

class App extends Component { 
  render() {
    return (
      <div className="component">
        <h3 
          className="text_container"
        > 
          <span className="text_a">
            textA {" "} 
          </span>
          <span className="text_b">
            textB
          </span> 
        </h3>
    </div>
    );
  }
}

render(<App />, document.getElementById('root'));

感谢您的回答，事实上，我希望float将我的元素保持在右边。我可能不太明白您想要实现什么，因为元素在没有
float
的情况下将保持内联（即“在右边”），但请记住
float
在
flex
容器中时将被忽略。一般来说，像
flex
和
grid
这样的较新css减少了对
float
的需求。是的，我明白，我正试图将textB推到屏幕的右边缘，让textA放在元素表面的其余部分，你可以在这里看到我的答案：谢谢你的回答，事实上，我希望float将我的元素保持在right@Webwoman您可以通过给h3一个
display:flex
和
将其向右推。text\u b
左边距：auto
是，但它会偏移单词，请参见此处：
import React, { Component } from 'react';
import { render } from 'react-dom'; 
import './style.css';

class App extends Component { 
  render() {
    return (
      <div className="component">
        <h3 
          className="text_container"
        > 
          <span className="text_a">
            textA {" "} 
          </span>
          <span className="text_b">
            textB
          </span> 
        </h3>
    </div>
    );
  }
}

render(<App />, document.getElementById('root'));

.component{ 
  padding:50px;
}
.text_container{  
  display: flex;
  align-items: baseline;
  font-size:5em;
}

.text_a{
    flex-basis: 95%;
}
.text_b{  
    font-size:0.60em;
    color:rgb(54, 0, 18); 
}