我试图将图像向右移到页面上方

Question

我遇到了另一个问题。我有4张图片。每行2个，这就是我想要的方式，但是我正尝试将它们向右移动，并在最新视频部分下的页面上移。

以下是我的HTML代码：

Invoke-WebRequest

我的CSS在这里：

<div id="index-gallery">
<div class="item">
    <img src="img/after.jpg" alt="" width="200px" />
    <p>My Caption here</p>
</div>
<div class="item">
    <img src="img/after.jpg" alt="" width="200px"/>
    <p>My Caption here</p>
</div>
<div class="item">
    <img src="img/after.jpg" alt="" width="200px"/>
    <p>My Caption here</p>
</div>
<div class="item">
    <img src="img/after.jpg" alt="" width="200px"/>
    <p>My Caption here</p>
</div>

这是我的四张图片的图片，请注意，这些图片仅用于测试目的：

Pictures that won't move

这是我要在上面移动四张图片的屏幕快照。

Attempting to move gallery here

任何帮助将不胜感激，谢谢您。

Answer 1

#index-gallery {
  width: 100%;
  text-align: right;
}

.item {
  width: 200px;
  display: block;
  background-color: #AAAAAAAA;
  margin-bottom: 1px;
  float: right;
}
.item:nth-child(odd) {
  clear: both;
}

<div id="index-gallery">
  <div class="item">
    <img src="img/after.jpg" alt="" width="200px" />
    <p>My Caption here</p>
  </div>
  <div class="item">
    <img src="img/after.jpg" alt="" width="200px" />
    <p>My Caption here</p>
  </div>
  <div class="item">
    <img src="img/after.jpg" alt="" width="200px" />
    <p>My Caption here</p>
  </div>
  <div class="item">
    <img src="img/after.jpg" alt="" width="200px" />
    <p>My Caption here</p>
  </div>
</div>