将行内容水平向右对齐html答案

【问题标题】：aligning row content to the right horizontally html将行内容水平向右对齐html
【发布时间】：2021-03-03 18:08:49
【问题描述】：

我有一个文本和一个小图像，我想水平对齐到右侧：

    <div class="row float-right">
      <div class="title" >Stream Chat</div>
      <img src="~assets/chat.svg" />
    </div>
    <!-- rest of the code -->
    <div class"row">
    ...

我希望两者在同一条线上彼此相邻，而不是在彼此下方。我可以使用float-right 并将它们移动到右侧，但问题是首先 img 位于文本下方，其次行移动到下一行的右侧并且它们保持在同一行！如何以使 text 和 img 保持水平并位于行右侧的方式修复它？

【问题讨论】：

如果您使用的是最新的引导程序。使用“align-items-end”类而不是“float-right”。否则在自定义 css 中，而不是将浮动权添加到“行”，将其添加到子级并检查。
目前提供的代码，无法复制问题，所以很难帮你解决。请提供此问题的工作代码sn-p

标签： html css image grid row

【解决方案1】：

使用弹性盒子！！这绝对是最简单的方法

#container{
display:flex;
justify-content:flex-end;
align-items:center;
border:solid 1px blue;
}

<div id="container">
  <div id='txt'>Stream Chat</div>
  <img src="https://via.placeholder.com/100" />
</div>

【讨论】：