Question

我正在为我的网站使用引导程序，我尝试在标题的左侧添加文本，在右侧添加图像。我试图使用行容器并使用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 />
...

但是它看起来像这样：The Image is more on the bottom then the header!

Answer 1

我重新创建了一个您所描述的简单案例。我使用Flex Box来创建您所要求的内容。我创建了一个容器div，然后创建了两个子div（左div和右div），然后分配了flex：1同时执行左右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>

CSS

.header {
  display: flex;

  width: 100%;
  height: 45px;
  background: red;
}

.title {
  flex: 1;
  background-color: green;
}

.img {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  background-color: yellow;
}

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

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)

我为您整理了一个小提琴：http://jsfiddle.net/k5uj04dt/6/

如何在引导程序4卡标题中向右移动图像？

1 个答案: