HTML CSS使用 Package 器为图片库添加标题

w1e3prcc 于 2023-05-02 发布在其他

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

我有一个非常简单的图片库。
图像的高度由div调用“row”控制。我想在每个图片下面添加一个独特的标题。
标题的宽度应与相关图像的宽度相同（图像宽度根据屏幕比例和大小而变化）。
这看起来简单得令人恼火，但我就是想不出来。先谢谢你了。
这是我的资料..
https://codepen.io/GBol/pen/yLRMOdY

.row {
  width: 100%;
  aspect-ratio: 11 / 2;
  display: block;
  border: solid purple;
}

.pic {
  height: 90%;
  float: left;
  margin: 0% 1% 0% 0%;
  display: block;
  border: solid red;
}

.caption {
  display: block;
  font-size: 10pt;
  width: 100%;
  border: solid blue;
}

<div class="row">
  <a href="http://placekitten.com/500/600">
    <img class="pic" src="http://placekitten.com/500/600" />
  </a>
  <a href="http://placekitten.com/300/600">
    <img class="pic" src="http://placekitten.com/300/600" />
  </a>
  <a href="http://placekitten.com/400/600">
    <img class="pic" src="http://placekitten.com/400/600" />
  </a>
</div>

<div class="caption">
  Caption Example
</div>

我尝试使用另一个div作为 Package 器来连接图像和标题，但无法正常工作。

css

来源：https://stackoverflow.com/questions/76091039/html-css-use-wrapper-to-add-caption-to-image-gallery

1条答案

按热度按时间

gmxoilav1#

这可以使用简单的显示Flex容器和行列Flex方向来完成。
我在这里添加了codepen解决方案https://codepen.io/abhijeetabnave/pen/xxyqOoy

.row {
  width: 100%;
  height: 200px;
  aspect-ratio: 11 / 2;
  display: flex;
  flex-direction: row;
  border: solid purple;
  justify-content: space-evenly;
}

.pic {
  height: 90%;
  float: left;
  margin: 0% 1% 0% 0%;
  display: block;
  border: solid red;
}

.caption {
  display: block;
  font-size: 10pt;
  width: 100%;
  border: solid blue;
}

.image-container {
  height: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

<div class="row">
  <a href="http://placekitten.com/500/600">
    <div class="image-container" ><img class="pic" src="http://placekitten.com/500/600" />
      <span> 
       <div class="caption">
         Caption Example 1
       </div>
      </span>
    </div>
  </a>
  <a href="http://placekitten.com/300/600">
    <div class="image-container" ><img class="pic" src="http://placekitten.com/300/600" />
      <span>
        <div class="caption">
          Caption Example 2
        </div>
      </span>
    </div>
  </a>
  <a href="http://placekitten.com/400/600">
    <div class="image-container" ><img class="pic" src="http://placekitten.com/400/600" />
      <span>
        <div class="caption">
          Caption Example 3
        </div>
      </span>
    </div>
  </a>
</div>

赞(0）回复(0）举报 2023-05-02

我来回答

HTML CSS使用 Package 器为图片库添加标题

1条答案

相关问题

热门标签

最新问答