如何使图像向右对齐答案

【问题标题】：How to justify image to the right如何使图像向右对齐
【发布时间】：2018-07-13 23:21:27
【问题描述】：

<div class="header">
    <img src="logo.png" id="logo">
        <div class="headerText">
            <span>WYJĄTKOWA PIOSENKA NA URODZINY</span>
        </div>
    </div>

我有问题。我想证明<span> 是正确的。

【问题讨论】：

你试过写 CSS 了吗？请参阅此documentation on aligning DIV。检查文档并做一些实验。您可以使用 jsfiddle.net 进行快速实验。
您打算将 headerText 元素中的文本右对齐，还是将 headerText 元素相对于 header 右对齐？
right align an image using CSS HTML的可能重复

标签： css

【解决方案1】：

上面的标题是向右对齐图像，下面的描述是向右对齐跨度，假设将跨度到右侧图像向左对齐来回答这个问题。下面我创建了一个名为 right 的类，其 css 为 float:right; 和 left 其 css 为 float:left; ，基本上它对齐元素的位置。我这样做是为了让你理解 css

.right
{
float:right;
}
.left
{
float:left;
}

<div class="header">
    <img src="logo.png" class="left" id="logo">
        <div class="headerText">
            <span class="right">WYJĄTKOWA PIOSENKA NA URODZINY</span>
        </div>
    </div>

【讨论】：

保持良好状态“你不懂基本的 css”并不是真正必要的。邀请她学习 CSS，解释元素，样式标签等更有意义。和我一样，您也没有阅读标题（因此我删除了我的答案）-它要求对齐图像。
是和不是。我所有的批评都是正确的。但如果我没有投反对票，我可能只会标记它。
对不起兄弟可能有人修改了它，但感谢您的关注，我应该考虑标题而不是我研究了正文，我会根据需要更改答案
我只是为我的粗鲁行为道歉
OP 已被要求详细说明她的需求。在那之前，一场评论战将毫无结果......

【解决方案2】：

float:right 的问题在于，如果前面的兄弟元素是块元素，或者元素本身没有空间可以容纳，比如文本，它会创建一个新行。但如有必要，文本可以换行。

这里使用display:flex;。

使用 flex，您正在创建其子元素的列，这类似于 float:left 通过在父元素上使用 flex-direction:row。如果您需要一个元素向右浮动，只需给它一个margin-left:auto;

.header {
  display: flex;
  flex-direction: row;
}

.headerText {
  margin-left: auto;
}

img {
  height: 50px;
  width: 50px;
  object-fit: cover;
}

<div class="header">
  <img src="http://novaservis.info/wp-content/uploads/2017/12/small-cute-dog-breeds-that-stay-smallbest-25-types-of-small-dogs-ideas-on-pinterest-types-of-dogs-exciting.jpg" id="logo" />
  <div class="headerText">
    <span>WYJĄTKOWA PIOSENKA NA URODZINY</span>
  </div>
</div>

【讨论】：

复杂度如何？能具体点吗？？
弹性类和空规则，GTG 回到 10
`flex 类和空规则`是什么意思？请具体说明您在此处指出的错误。
返回。哇。正好十分钟。你有一个空的 img 规则，在 .header 规则中使用 display:flex 规则。