Question

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

我正在尝试创建缩略图库，我制作了jsfiddle here。

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>

CSS

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

#wrapper {
  background-color: blue;
  display: inline-block;
  padding: 5px;
}

.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 5px;
}

我想将红色框放在主div中心，但不是像text-align: center;那样，在它们之间从左到右对齐，并使整个块居中。所以我想，为什么不制作一个包装div并使其居中呢？这就是我的问题所在，我希望蓝色包装器不大于其内容，但它填充了主要的div。答案here说inline-block应该可以解决问题，但我无法弄清楚如何解决问题。整个事情肯定可以很轻松，所以我错过了什么？

如果是TLDR，我在这里制作了一些快照：http://imgur.com/a/a2Fjg

非常感谢！

Answer 1

你可以通过CSS解决它，但是这样你应该用硬编码的值编写很多媒体查询。我建议你用javascript做这个魔术：

1）获取可用宽度

2）计算一行中可以出现的块数

3）获取所需宽度并将其设置为包装容器

Answer 2

使用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个隐藏框，将最后一个红色框向左推。

FIDDLE

段

＆＃13;

html,
body {
  width: 100%;
  height: 100%;
}
#main {
  width: 100vw;
  max-width: 640px;
  height: auto;
  background-color: rgba(255, 105, 180, 0.5);
  padding: 10px;
}
#wrapper {
  background-color: blue;
  height: auto;
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-content: space-between;
  flex-wrap: wrap;
}
.box {
  display: block;
  background-color: red;
  margin: 2.5px auto 10px;
  width: 200px;
  height: 200px;
}
.space {
  background: none;
}

＆＃13;

<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 class="space box"></div>
      <div class="space box"></div>

    </div>
  </div>
</body>

＆＃13;

Answer 3

因此，您的内容扩展到适合100％可用空间的原因是，因为这些框是“内联块”＆＃39;它们位于一条线（思考文本行）内，如果它包裹，它将占据宽度的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小提琴：https://jsfiddle.net/Chipmo/z30fLv0v/

在换行之前指定元素的数量有点棘手。我找到的解决方案是在每个框之后添加<br>标记，然后使用第n个子选择器选择性地激活它们。我确信这样做的方式不会涉及无关的标签 - 可能使用display: table恶作剧或flexbox，但这有效并显示了基本概念。

JS小提琴：https://jsfiddle.net/Chipmo/xsf6c7e5/

以下片段：

<强>最大宽度

＆＃13;

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

＆＃13;

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

＆＃13;

元素数量

＆＃13;

#main {
  background-color: rgba(255, 105, 180, 0.5);
  height: 100%;
  padding: 10px;
  text-align: center;
}
/*needs 2 ID's to gain higher precedence than the text-align center from above */

#main #wrapper {
  background-color: blue;
  display: inline-block;
  padding: 5px;
  text-align: left;
}
.box {
  display: inline-block;
  background-color: red;
  width: 200px;
  height: 200px;
  margin: 5px;
}
#wrapper br {
  display: none;
}

/*change to 8n for every fourth, 4n for every 2nd etc etc 
  You will probably want to use media queries with this */

#wrapper br:nth-child(4n) {
  display: block;
}

＆＃13;

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

＆＃13;

如何使div适应其内容的宽度？

3 个答案:

段