花谷朵 2022-10-10 16:26 采纳率: 62.5%
浏览 55
已结题

不用笨办法，怎么实现呀

img

就不规则宽度的图片，不规则排列，然后都刚好占满一行

不使用一个一个设置不同宽度的方法，怎样优雅的实现这个🦷

  • 写回答

2条回答 默认 最新

  • Ko-walski 2022-10-10 16:44
    关注

    img

    <html>
<head>
<style>
body {
  font: 1.1em Arial, Helvetica, sans-serif;
}

img {
  mahttps://img-mid.csdnimg.cn/release/static/image/mid/ask/599175193566168.png "#left")
x-width: 100%;
  display: block;
}

figure {
  margin: 0;
  display: grid;
  grid-template-rows: 1fr auto;
  margin-bottom: 10px;
  break-inside: avoid;
}

figure > img {
  grid-row: 1 / -1;
  grid-column: 1;
}

figure a {
  color: black;
  text-decoration: none;
}

figcaption {
  grid-row: 2;
  grid-column: 1;
  background-color: rgba(255,255,255,.5);
  padding: .2em .5em;
  justify-self: start;
}

.container {
  column-count: 4;
  column-gap: 10px;
}
</style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <figure>
    <img src="https://assets.codepen.io/12005/windmill.jpg" alt="A windmill" />
    <figcaption><a href="#">1</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/suspension-bridge.jpg" alt="The Clifton Suspension Bridge" />
    <figcaption><a href="#">2</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/sunset.jpg" alt="Sunset and boats" />
    <figcaption><a href="#">3</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/snowy.jpg" alt="a river in the snow" />
    <figcaption><a href="#">4</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-balloons1.jpg" alt="a single checked balloon" />
    <figcaption><a href="#">5</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/dog-balloon.jpg" alt="a hot air balloon shaped like a dog" />
    <figcaption><a href="#">6</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/abq-balloons.jpg" alt="View from a hot air balloon of other balloons" />
    <figcaption><a href="#">7</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/disney-balloon.jpg" alt="a balloon fairground ride" />
    <figcaption><a href="#">8</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-harbor.jpg" alt="sunrise over a harbor" />
    <figcaption><a href="#">9</a></figcaption>
  </figure>
  <figure>
    <img src="https://assets.codepen.io/12005/bristol-balloons2.jpg" alt="three hot air balloons in a blue sky" />
    <figcaption><a href="#">10</a></figcaption>
  </figure>
  <figure>
  <img src="https://assets.codepen.io/12005/toronto.jpg" alt="the Toronto light up sign at night" />
    <figcaption><a href="#">11</a></figcaption>
  </figure>
</div>

</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(1条)

报告相同问题？

问题事件

  • 系统已结题 10月19日
  • 已采纳回答 10月11日
  • 创建了问题 10月10日

悬赏问题

  • ¥15 求会做聚类，TCN的朋友有偿线上指导。以下是目前遇到的问题
  • ¥100 无网格伽辽金方法研究裂纹扩展的程序
  • ¥15 错误于library(org.Hs.eg.db): 不存在叫‘org.Hs.eg.db’这个名称的程序包，如何解决？
  • ¥60 求一个图片处理程序，要求将图像大小跟现实生活中的大小按比例联系起来的
  • ¥50 求一位精通京东相关开发的专家
  • ¥100 求懂行的大ge给小di解答下！
  • ¥15 pcl运行在qt msvc2019环境运行效率低于visual studio 2019
  • ¥15 MAUI,Zxing扫码，华为手机没反应。可提高悬赏
  • ¥15 python运行报错 ModuleNotFoundError: No module named 'torch'
  • ¥100 华为手机私有App后台保活