Question

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

我编写了一个python程序，用于读取包含缩略图图像的yaml文件以及指向我的谷歌相册的链接，因为它们取消了picasaweb.google.com但保留了所有相册。

我满足于每行有四个图像缩放％。我甚至无法弄清楚为什么这些图像垂直堆叠和偏移。

如果有响应并根据宽度显示不同数量的专辑封面会很好，但缩放很好。

＆＃13;

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

＆＃13;

Answer 1

图是一个具有display: block属性的元素 - 所以它在每一行都适合一个。尝试使用div切换到h2，这样可以为您提供更灵活，更好地理解网页浏览器和搜索引擎优化。

顺便说一下。您甚至没有在上面的代码段中关闭</figcaption。

Answer 2

您需要关闭figcaption，然后可以在包含所需行display: flex的元素上使用a，并设置a }简称为flex-grow: 1或flex: 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>

如何让图像像谷歌相册视图一样流动

2 个答案: