Html 如何将引导4卡头中的图像向右移动？_Html_Css_Bootstrap 4

Html 如何将引导4卡头中的图像向右移动？

html css bootstrap-4

Html 如何将引导4卡头中的图像向右移动？,html,css,bootstrap-4,Html,Css,Bootstrap 4,我正在为我的网站使用bootstrap，我尝试在标题的左侧创建一个文本，在右侧创建一个图像。我曾尝试使用行容器并使用justify content end，但它与标题的高度不同。我想把它们放在同一高度这就是我所尝试的： <div class="card" style="margin-bottom: 25px;"> <div class="card-header"> <h4 class="card-title Anton"><?php echo(

我正在为我的网站使用bootstrap，我尝试在标题的左侧创建一个文本，在右侧创建一个图像。我曾尝试使用行容器并使用justify content end，但它与标题的高度不同。我想把它们放在同一高度

这就是我所尝试的：

<div class="card" style="margin-bottom: 25px;">
  <div class="card-header">
  <h4 class="card-title Anton"><?php echo($thread['title']); ?>
    <span class="row justify-content-end">
        <img height="32" width="32" src="assets/img/edit.png" href="/test" style="padding: none; margin: none;">
    </span>
  </h4>

<hr />
...

...

但它看起来是这样的：

我重新创建了一个简单的案例来说明您所描述的内容。我使用Flex Box创建了您所要求的内容。我创建了一个container div，然后创建了两个子div（left div和right div），然后分配flex:1执行left和right div，使它们具有相同的宽度。之后，我分配了图像（在右div中）

justify content:flex end

这会将右div的内容移动到div的最右侧

HTML

<html>
  <body>
  <div class="header">
    <div class="title">
    <p>Text</p>
    </div>
    <div class="img">
      <img src="smiley.gif">
    </div>
  </div>
  </body>
</html>

以下是供您使用的快速参考：

justify-content: flex-start means content will start from the left
justify-content: center means content will be centered in the middle
justify-content: flex-end means content will be pushed to the end of the div (right)

我为您准备了一把小提琴：

我可以问一下，什么是内容结尾吗？如果您使用的是FlexBox，它不应该是flex end吗？

justify-content: flex-start means content will start from the left
justify-content: center means content will be centered in the middle
justify-content: flex-end means content will be pushed to the end of the div (right)