如何使图像低于另一个图像？

Question

我尝试了我在网上找到的解决方案，比如在图片周围的html代码中引入div标记和中断，但是它没有起作用。我还试图在img{ }下面放置一个css样式中的一般显示块，但这不起作用。只有当我包括其中的30人时，休息才能工作。

​

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;

<div>

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

​

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>

​

更新

如果您希望它是灵活的，只需将其放在<div>标记中，因为默认情况下，它已经设置为block。

<div>
  <div>
    <img src="https://dummyimage.com/300x200/000/fff" class="block">
  </div>

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

如果这样做不起作用，那么您可能有一个现有的CSS，它会导致冲突或重写样式。你能贴出来吗？

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。