html - 将 div 内的图像右对齐

Question

我有一个 div，它的宽度比里面的图像小，而且 div 已将溢出设置为隐藏。所以图像只能从左边看到一部分。

我想从右侧看到该图像的某个部分。

html

<div id="my_div">
    <img src="some_image.jpg" width="600" />
</div>

CSS

#my_div {
    position: relative;
    width: 300px;
    overflow: hidden;
}

所以我从左边只能看到该图像的 50%。我想从右边看到该图像的 50%。我不想看到整个图像。如何做到这一点？

编辑

我无法设置 CSS:

position: absolute;
right: 0px;

还有其他解决方案吗？

Answer 1

解决方案 #1:

将图片向右浮动

FIDDLE

#my_div {
  width: 300px;
  overflow: hidden;
  border: 1px solid green;
}
#my_div img {
  float: right;
}

<div id="my_div">
  <img src="http://placehold.it/600x150" width="600" />
</div>

解决方案#2:

在容器上设置direction: rtl;

FIDDLE

#my_div {
  width: 300px;
  overflow: hidden;
  border: 1px solid green;
  direction: rtl;
}

<div id="my_div">
  <img src="http://placehold.it/600x150" width="600" />
</div>