gpt4 book ai didi

javascript - 我如何让图像像在谷歌相册 View 中那样流动

转载 作者:行者123 更新时间:2023-11-28 03:25:24 25 4
gpt4 key购买 nike

我很难相信需要数兆字节的 css 和 javascript。

我编写了一个 python 程序来读取一个 yaml 文件,其中包含缩略图图像和指向我的 google 相册的链接,因为他们取消了 picasaweb.google.com 但保留了所有相册。

如果每行有四张图像按 % 缩放,我会很满意。我什至不明白为什么这些图像是垂直堆叠和偏移的。

如果能够响应并根据宽度显示不同数量的专辑封面会很好,但缩放没问题。

   <html>
<head>
Why the indent
</head>
<body>
<h1>Why the indent</h1>
<h2>Nepal</h2>

<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg"
style="width:20%">
<figcaption>The lake</figcaption
</figure>
</a>

<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg"
style="width:20%">
<figcaption>Chitwan, wild tigers and elephants</figcaption
</figure>
</a>

<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg"
style="width:20%">
<figcaption>Elephant Abuse</figcaption
</figure>
</a>
</body>

最佳答案

你需要关闭你的figcaption,然后你可以在一个元素上使用display: flex来包裹你想要的a在一行中,并将 a 设置为 flex-grow: 1flex: 1 0 0 以便它们填充可用的行的宽度。

.flex {
display: flex;
}
.flex > a {
flex: 1 0 0;
}
<h1>Why the indent</h1>
<h2>Nepal</h2>
<div class="flex">
<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg">
<figcaption>The lake</figcaption>
</figure>
</a>

<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg">
<figcaption>Chitwan, wild tigers and elephants</figcaption>
</figure>
</a>

<a href="https://www.w3schools.com/images/lamp.jpg">
<figure>
<img src="https://www.w3schools.com/images/lamp.jpg">
<figcaption>Elephant Abuse</figcaption>
</figure>
</a>
</div>

关于javascript - 我如何让图像像在谷歌相册 View 中那样流动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44996979/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com