带有浮动子元素的中心父 div

Question

父母没有定义宽度，因为里面有未知数量的孩子。

为什么孩子会掉入新行以及如何预防？孩子们需要在同一条线上。

.wrap {
  position: absolute;
  left: 50%;
  top: 50px;
  height:40px;
  transform: translateX(-50%);
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 1

你应该考虑使用 flex-box。

并回答您的问题：浮动 DIV 不应该也不会扩展其父级的宽度，因为它们“浮动”在内容流之上。

如果没有另外指定，绝对定位的块元素的初始宽度为零。因此，他们的行为与平时不同。

浮动元素确实表现得像往常一样：因为父元素没有提供足够的宽度（零！）来将它们全部显示在一行中，当然它们会中断到下一行。

.wrap {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  margin-top: 50px;
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 2

由于您使用 left: 50%，.wrap 的最大宽度是 body 剩余的 50%。

这就是发生换行的原因。

为避免这种情况，请使用 margin-right: -50% 为其添加更多空间。这将给它一个额外的 50%（即左侧丢失的空间：50% 样式）

.wrap {
  position: absolute;
  left: 50%;
  margin-right: -50%;
  top: 50px;
  height:40px;
  transform: translateX(-50%);
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 3

这里发生的情况是，当您使用 translate 时，元素会在视觉上重新定位，尽管从文档流的角度来看，它仍然定位在左侧 50% 处。

因此，正如您在此示例中看到的那样，它们同时换行，尽管有人认为第一个不应该，因为还有空间，但实际上没有，因为从技术上讲，第一个与第二个具有相同的位置，因此它同时换行。

.wrap {
  position: absolute;
  left: 50%;
  top: 150px;
  height:40px;
}
.wrap.translate {
  top: 50px;
  transform: translateX(-50%);
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

<div class="wrap translate">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>
<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

---

解决此问题的最简单和最好的方法是将wrap 设为inline-block 并在其父级上设置text-align: center，在本例中为body

body {
  text-align: center;
}
.wrap {
  display: inline-block;
  height:40px;
}
.box {
 width:40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

---

还有一个是把box的inline-block设置成text-align: center在wrap上

注意，为了消除行内块元素之间的空白，我还更改了标记，使每个box 的结束和开始标记在同一行。这里还有一些解决这个问题的方法：how-to-remove-the-space-between-inline-block-elements

.wrap {
  height:40px;
  text-align: center;
}
.box {
 display: inline-block;
 width:40px;
 height:40px;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0
  </div><div class="box">1
  </div><div class="box">2
  </div><div class="box">3
  </div><div class="box">4
  </div><div class="box">5
  </div><div class="box">6
  </div><div class="box">7
  </div><div class="box">8
  </div><div class="box">9
  </div><div class="box">10
  </div>
</div>

---

如果你不需要支持旧版浏览器，你也可以使用 Flexbox

.wrap {
  display: flex;
  justify-content: center;
  height:40px;
}
.box {
 width:40px;
 height:40px;
 background:red;
 margin-right:1px;
}

<div class="wrap">
  <div class="box">0</div>
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>

Answer 4

使用center 类：

.wrap {
  text-align: center;
  margin: 50px auto 0 auto;
  height:40px;
}

.center {
  display: inline-block;
}

.box {
 width: 40px;
 height:40px;
 float:left;
 background:red;
 margin-right:1px;
}

@media all and (max-width: 474px) {
  .box {
    width: 25px;
  }
}

<div class="wrap">
  <div class="center">
    <div class="box">0</div>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <div class="box">4</div>
    <div class="box">5</div>
    <div class="box">6</div>
    <div class="box">7</div>
    <div class="box">8</div>
    <div class="box">9</div>
    <div class="box">10</div>
  </div>
</div>