如何使图像在保持有序的同时向右浮动

Question

我有三张图片，我想浮动到div的右侧。

<div>
  <img src="one_cat.jpg"></img>
  <img src="two_cats.jpg"></img>
  <img src="three_cats.jpg></img>
</div>

我已经向他们添加了float: right属性......

img {
    float: right;
} 

......虽然这使得它们处于正确的一面，但它也会颠倒它们的顺序。

这是我的code。

我如何将他们漂浮到他们的div的右边，同时还按照我宣布他们的顺序保留它们？

Answer 1

浮动div容器/包装器而不是图像

div {
   float: right;
   display: inline-block; /* might want to add this too , but not necessary */
}

Answer 2

从 img 中删除浮动，并将text-align添加到 div ：

div {
    text-align: right;
}

Answer 3

尝试使用：

#images {
  float: right;
}
img {
  height: 100px;
  float:left;
}

将图像放在div #images中。

Answer 4

回答了类似的问题here。

它建议更改列出图像的顺序，或者将它们包装在另一个元素中（比如你拥有的div）并向右浮动。

Answer 5

您可以添加此规则

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

更改div的文本对齐方式，您可以使用图像的位置，例如text-align：center，并为图像添加一些边距。