如何在React中将图像标签移动到页脚的最右侧

Question

如何将图像标记移动到页脚的最右侧？目前的结果是：左边的CCD_ 1。结果应该是Random Title {image_logo}<---假设这是一个页脚。

查看下面的代码：

<LowerFooter className="lower__footer">
<h2>
&copy;  <span>Random Title</span>
<img src = {image_logo} width = '50' height= '50' />
</h2>
</LowerFooter>

样式组件：

const LowerFooter = styled.div`
margin: 0;
text-align: left;
background-color: #333333;
color: white;
padding: 1rem;
h2 {
span {
color: #FFF;
text-transform: uppercase;
}
}
@media screen and (min-width: 260px) and (max-width: 450px) {
h2 {
span {
display: block;
}
}
}
`;

Answer 1

您可以使用flex和justify-content: space-between

只需将img移动到h2之外

<LowerFooter className="lower__footer">
<h2>
&copy;  <span>Random Title</span>
</h2>
<img src = {image_logo} width = '50' height= '50' />
</LowerFooter>

并且在下页脚中添加这些样式

display: flex;
justify-content: space-between;