Css 如何使div适应其内容'；宽度是多少？_Css

Css 如何使div适应其内容'；宽度是多少？

css

Css 如何使div适应其内容'；宽度是多少？,css,Css,这是我在这里的第一个问题，但我已经阅读了许多Java答案，这些答案对我帮助很大。我以前做过一些研究，但是如果我重复了一个问题或者做错了什么，请毫不犹豫地告诉我我正在尝试创建一个缩略图库，我制作了一个 HTML <body> <div id="main"> <div id="wrapper"> <div class="box"></div> <div class="box"></di

这是我在这里的第一个问题，但我已经阅读了许多Java答案，这些答案对我帮助很大。我以前做过一些研究，但是如果我重复了一个问题或者做错了什么，请毫不犹豫地告诉我

我正在尝试创建一个缩略图库，我制作了一个

HTML

<body>
  <div id="main">
    <div id="wrapper">
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </div>
  </div>
</body>

我希望将主div中的红色框居中，但不希望

text align:center，在框之间从左到右对齐，并使整个块居中。所以我想，为什么不制作一个包装div并将其居中呢？
这就是我的问题所在，我希望蓝色包装不大于其内容，但它填充了主div。
答案是inline block应该可以解决这个问题，但我不知道如何解决。
整件事当然可以很容易地完成，那么我错过了什么呢
如果是TLDR，我在这里做了一些快照：
非常感谢
 您可以通过CSS来解决这个问题，但是通过这种方式，您应该使用硬编码的值编写大量的MediaQuery。我建议您使用javascript实现这一魔力：
1） 获取可用宽度
2） 计算，一行中可以显示多少块
3） 获取所需的宽度并为包装容器设置它
使用flexbox。这是设计的核心：
#wrapper {
  background-color: blue;
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}

在底部添加2个不可见的框，将最后一个红色框推到左侧

一小条

html，
身体{
宽度：100%；
身高：100%；
}
#主要{
宽度：100vw；
最大宽度：640px；
高度：自动；
背景色：rgba（255、105、180、0.5）；
填充：10px；
}
#包装纸{
背景颜色：蓝色；
高度：自动；
填充：10px；
显示器：flex；
弯曲方向：行；
证明内容：周围的空间；
对齐内容：之间的空间；
柔性包装：包装；
}
.盒子{
显示：块；
背景色：红色；
利润率：2.5px自动10px；
宽度：200px；
高度：200px；
}
.空间{
背景：无；
}
因此，您的内容扩展到100%可用空间的原因是，由于框是“内联块”，它们位于一行（想想文本行）内，如果包装，将占据100%的宽度。浏览器不知道您的意图，并且将其完全像文本一样处理，通常情况下，我们希望这样处理
为了改变这一点，我们需要：
指定容器的最大宽度
在换行之前，指定一行中可以包含的元素数
无论哪种方式，我们都必须硬编码一些假设/限制（不涉及任何脚本或复杂的媒体查询等）
指定包装的最大宽度可能是最简单的方法-如下所示：
body{
  width:100%;
}

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  width:100%;
}

#wrapper {
  background-color: blue;
  display: block;
  padding: 5px;
  max-width:640px;
  margin: 0 auto;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  /* If you want it to shrink rather than wrap you could say
  width: calc((100% / 3) - 15px);*/
  height: 200px;
  margin: 5px;
}

JS小提琴：

在换行之前指定元素的数量有点棘手。我找到的解决方案是在每个框后添加
标记，然后使用第n个子选择器选择性地激活它们。我相信有一种方法可以做到这一点，它不涉及无关的标记-可能是使用display:table
shenanigans或flexbox，但这可以工作并显示基本概念
JS小提琴：

下面是一些片段：
最大宽度

正文{
宽度：100%；
}
#主要{
背景色：rgba（255、105、180、0.5）；
身高：100%；
填充：10px；
宽度：100%；
}
#包装纸{
背景颜色：蓝色；
显示：块；
填充物：5px；
最大宽度：640px；
保证金：0自动；
}
.盒子{
显示：内联块；
背景色：红色；
宽度：200px；
/*如果你想让它收缩而不是包裹，你可以说
宽度：计算（（100%/3）-15px）*/
高度：200px；
保证金：5px；
}

我想我会这样做，尽管我将内联块更改为浮动。什么时候调用这个函数有什么想法吗？我在加载和window.onresize（）
（或$（window.resize（）
使用JQuery）时调用了它，刷新页面时它看起来不错，但在调整大小时它不是很平滑，而且我相信调用太多了。无论如何，我也会尝试使用flexbox和mediaqueries，可惜没有什么能像padding:0 auto那样。你们多久调整一次你们网站的窗口大小？
body{
  width:100%;
}

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  width:100%;
}

#wrapper {
  background-color: blue;
  display: block;
  padding: 5px;
  max-width:640px;
  margin: 0 auto;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  /* If you want it to shrink rather than wrap you could say
  width: calc((100% / 3) - 15px);*/
  height: 200px;
  margin: 5px;
}