Question

我想有文字幕的图像。图像是一带的;一是试图添加文字,就跳到网页开始。

.seasons{
   display: flex;  
   
}

.season-img{
    width: 70%;
    border-radius: 70px;
    padding: 50px;
}

#season-left{
    float: right;
}

#season-right{
    float: left;
}

<div class="seasons">
    <a href="" class="season-a">
            <img src="friends-season1.webp" alt="season 1" class="season-img" id="season-left">
            Season 1
    </a>
    <a href="" class="season-a">
        <img src="friends-season2.webp" alt="season 2" class="season-img" id="season-right">
        Season 2
    </a>
</div>

I tried several things and none have worked

Answer 1

实际上,案文不是“假定”,而是实际上放在与相应形象相同的横向线上。之所以出现这种情况,是因为<a> tag都在。

假设你将案文作为图像的标签,你可以先开一个锅炉板。通知说,我正在使用<代码><figcaption>标号,标注在图像下,该图像是个块级要素。这将使案文坐在个人行文上,低于形象。

调整该守则以满足你的需要。

传真

<div class="seasons">
  <a href="">
    <figure>
      <img src="https://images.unsplash.com/photo-1683009427692-8a28348b0965?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Description of the image">
      <figcaption>Season 1.</figcaption>

    </figure>
  </a>
  <a href="">
    <figure>
      <img src="https://images.unsplash.com/photo-1683009427692-8a28348b0965?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Description of the image">
      <figcaption>Season 2.</figcaption>
    </figure>
  </a>
</div>

CSS

img {
  width: 300px;
}

.seasons{
   display: flex;  
}

友情链接