如何在另一個圖像下方制作圖像 go？

Question

我嘗試了在網上找到的解決方案，例如在圍繞圖像的 html 編碼中引入 div 標簽和中斷，但它不起作用。 我還嘗試在我的 css 樣式下放置一個通用顯示塊 img{ } 但這沒有用。 只有當我包含大約 30 個時，休息時間才有效。

        <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;

Answer 1

我認為您只需要安排您的樣式，例如，如果該圖像包含描述或類似內容，請嘗試用“div”將其括起來。 但是如果只是純圖像，那么你可以讓那個img的顯示被阻止。 請參閱示例片段。

 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>

Answer 2

有很多方法可以實現這一點，一個小技巧是使用中斷：

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

您還可以使用塊：

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

您可以使用 div （分隔符）：

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

您可能還想嘗試使用z-index和position: absolute 。