Question

我目前正在运行以下代码：

HTML

<div style="img"/>
 <img src="spiderman.png" alt=""/>
 <img src="superman.png" alt="" height="25%" width="25%"/>
 <img src="batman.png" alt="" />
</div>

CSS

 div{
    text-align: right;
}

div img {
    display: list-item;
    width: 100px;
    height: 100px;
}

div:after {
    content: '';
    display: inline-block;
    width: 100
}

我似乎无法让图像保持垂直线并移动到屏幕右侧，任何建议都会有所帮助

Answer 1

父母的

display: flex; flex-direction: column; align-items: flex-end;会将它们放在与右边对齐的列中。

.img {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.img img {
  width: 100px;
  height: 100px;
}

<div class="img">
  <img src="spiderman.png" alt="">
  <img src="superman.png" alt="" height="25%" width="25%">
  <img src="batman.png" alt="">
</div>

您也可以将它们向右浮动，然后clear: right，这样它们就会出现在列中。

.img {
  overflow: auto;
}

.img img {
  width: 100px;
  height: 100px;
  float: right;
  clear: right;
}

<div class="img">
  <img src="spiderman.png" alt="" />
  <img src="superman.png" alt="" height="25%" width="25%" />
  <img src="batman.png" alt="" />
</div>

Answer 2

您不必担心将项目与text-align对齐，更改display或完全使用:after。只需将图像浮动到右侧，然后清除它们：）

＆＃13;

div img {
  float: right;
  clear: both;
  width: 100px;
  height: 100px;
}

＆＃13;

<div>
  <img src="http://placehold.it/100" alt="" />
  <img src="http://placehold.it/100" alt="" />
  <img src="http://placehold.it/100" alt="" />
</div>

＆＃13;

希望这有帮助！：）

如何在CSS中向右移动所有图像

2 个答案: