css 链接中图像下的文本

cbeh67ev 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(107)

我想要下面有文字的图像。图像是在一个，当我试图添加文本它跳到页面的开始。

.seasons{
   display: flex;  
   
}

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

#season-left{
    float: right;
}

#season-right{
    float: left;
}

个字符
我试过几种方法，没有一种有效

css

来源：https://stackoverflow.com/questions/77761622/text-under-images-in-links

1条答案

按热度按时间

von4xj4u1#

实际上，文本并没有“跳起来”，而是实际上与对应的图像位于同一水平线上。发生这种情况的原因是因为<a>标记中的图像和文本都是inline elements。
假设你使用文本作为图像的标签，这里有一个样板，你可以开始。注意，我使用<figcaption>标记作为图像下面的文本，这是一个块级元素。这将导致文本本身位于图像下面的单独一行。
请调整代码以满足您的需求。我还在这里包含了一个codepen，让您直观地看到您的答案和我的答案之间的差异。
https://codepen.io/Jun-Wen-Soh/pen/yLweQPX的
HTML

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

型

赞(0）回复(0）举报 2024-01-09

我来回答

css 链接中图像下的文本

1条答案

相关问题

热门标签

最新问答