时间戳

首页 > 解决方案 > 如何使容器缩小以适应其内容？（例如，缩略图的包装画廊）

html - 如何使容器缩小以适应其内容？（例如，缩略图的包装画廊）

问题描述

我有一个缩略图容器，并希望在每一行上显示尽可能多的缩略图，并将其余部分包裹到下一行，依此类推。

但是我希望容器的宽度缩小以适应，所以右侧没有多余的空间。

我觉得这应该是相当微不足道的，但我尝试的没有任何工作......

HTML：

<div id="main">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

CSS：

body {
  padding: 5em;
}
#main {
  background: red;
}
#main div {
  width: 100px;
  height: 100px;
  display: inline-block;
  background: #eee;
  border: 1px solid black;
}

https://codepen.io/codemunky/pen/yLgYQKr

我需要的是在顶行的右侧看不到红色，无论视口是什么。当窗口被调整大小时，框应该换成额外的行，但容器应该始终是顶行的宽度，仅此而已。

我试过display:inline-block了#main。仅当所有盒子都在一行上时才有效，一旦包装就失败。

我试过display:flex;flex-wrap:wrap了#main。根本不起作用。我知道我可以用justify-content space-aroundor将它们均匀分布space-between，但我不想要其中任何一个。

我已经尝试过无数种minmax/ fit-content/ auto/clamp与 flexbox 和 grid 的组合（我对它很陌生），但什么都做不了。

我觉得必须有一个相当简单的 CSS 解决方案来解决这个问题——有人可以教育我吗！

我想出的唯一非 JS “解决方案”是为各种视口大小设置十几个不同的媒体断点，它们具有硬编码的宽度。可怕！

谢谢你。

标签： htmlcssflexboxcss-grid

解决方案

推荐阅读