how do i move all images to the right in css - html

Question

I'm currently running the following code:
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
}
I cant seem to get the images to remain in a vertical line and move to the right of the screen, any suggestions would be helpful

Answer 1

display: flex; flex-direction: column; align-items: flex-end; on the parent will put them in a column aligned to the right.
.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>
You could also float them right, then clear: right so they're in a column.
.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

You don't need to worry about aligning items to the right with text-align, changing their display, or using :after at all. Simply float the images to the right, and clear them as well :)
div img {
float: right;
clear: both;
width: 100px;
height: 100px;
}
<div>
<img src="http://placehold.it/100" alt="" />
<img src="http://placehold.it/100" alt="" />
<img src="http://placehold.it/100" alt="" />
</div>
Hope this helps! :)