How do I make an image go below another image?-CodePudding

I have attempted solutions I have found online, such as introducing div tags and breaks in my html coding around the images, but it did not work. I also attempted to put a general display block in my css style underneath img{ } and this did not work. The breaks only work if I include about 30 of them.

        <img src="images/Paella.jpg" class="img1">
        <p>For the assignment I chose to use a photo of a dish I cooked, Spanish Paella. It was a surprisingly easy dish that did not require a lot of cooking time, and I was quite happy with how it turned out. I uploaded my own image to <a href="https://imgur.com/sILzjLe" target="blank"> imgur </a> for the assignment. </p>

        <br>
        I did struggle to get the image to not be blurry, so I credit <a href="https://css-tricks.com/almanac/properties/i/image-rendering/" target="blank"> this site </a> which helped maintain the image clarity.    
        </p>
    </div>
    <br>
    <div>
        <a href="https://imgur.com/Zf6pY9E" target="blank">
        <img id="Ciri" src="images/Ciri.jpg"></a>
    </div>

Css:

img{
    display: block;
}
.img1{
    float: left;
    margin: 15px;
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    width: auto;
    height: auto;
    max-height: 500px;
    max-width: 650px;;
    border-radius: 30%;
}
#Ciri{
    image-rendering: auto;
    image-rendering: crisp-edges;
    image-rendering: pixelated;
    max-height: 425px;
    max-width: 500px;
    border: 3px solid #000000;
    border-radius: 150px;

CodePudding user response：

I think you just have to arrange your stylings, like if that image contains a description or alike, try enclosing it with an "div". But if it's only pure images, then you can make the display of that img to block. See sample snippet.

img.block {
  display: block;
}

<div>
  <img src="https://dummyimage.com/300x200/000/fff" class="block">
  
  <div>
    <img src="https://dummyimage.com/400x200/000/fff">
    <p>
    this is an image that has a caption
    </p>
  <div>
</div>

CodePudding user response：

There are so many ways to achieve this, a little dirty trick is to use a break:

<img src="url" /><br>
<img src="url" />

You could also use blocks:

<style> img { display: block }</style>

You could use div (dividers):

<div><img src="url" /></div>
<div><img src="url" /></div>

You may also want try using z-index and position: absolute.