如何使内联块右对齐答案

【问题标题】：How to make inline-block align right如何使内联块右对齐
【发布时间】：2017-11-21 23:29:32
【问题描述】：

我正在尝试将图像向右对齐，但尽管反复尝试使用 flex、text-align 等，但仍无法这样做。

我已经浏览了很多问题，但没有找到满意的答案。

img {
        display: inline-block;
        text-align: right;
    }

<h1>
  <img src="burj.jpeg">    
  Enjoy the world of pure travel masti
</h1>

【问题讨论】：

【解决方案1】：

在文本之后放置h1 图像标签可以达到目的。

<h1>  
      Enjoy the world of pure travel masti
      <img src="burj.jpeg" alt="Sample Picture">  
 </h1>

【讨论】：

【解决方案2】：

我认为您需要img（=元素名称）而不是.img（=类名称），然后使用float：

img {
    display: inline-block;
    float:right;
}

【讨论】：

【解决方案3】：

您在 CSS 中使用 . 运算符，而 img 是标签名称。 . 运算符用于类名，而# 运算符用于id。在 eriting 他们的 CSS 时使用直接标签 nme。

写这个。

img {
    display: inline-block;
    float: right;
}

运行它here。

【讨论】：

【解决方案4】：

你可以使用 float right

img {
    float: right;
}

<h1>
        <img src="http://via.placeholder.com/350x150">    
        Enjoy the world of pure travel masti
    </h1>
CSS:-

版本

img {
    float: left;
}

<h1>
        <img src="http://via.placeholder.com/350x150">    
        Enjoy the world of pure travel masti
    </h1>
CSS:-

【讨论】：