具有浮动子项的中心父div

Question

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

为什么孩子会陷入新的界限以及如何预防？孩子们需要站在同一条线上。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

由于你使用左：50％，.wrap的最大宽度是剩余的50％。

这就是包裹发生的原因。

为避免这种情况，请使用margin-right为其添加更多空间：-50％。这将给它一个50％的附加值（即左侧丢失的空间：50％风格）

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

这里发生的事情是当你使用translate时，元素在视觉上重新定位，但从文档流的角度看，它仍然位于50％左右。

正如你可以在这个样本中看到的那样，它们同时包裹，虽然有人认为第一个不应该留下空间，但是没有，因为技术上第一个有相同的作为第二个位置，因此它同时包裹。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

另一个是制作box inline-block并在text-align: center上设置wrap

注意，为了打败内联块元素之间的空白区域，我还更改了标记，以便每个box的结束和开始标记位于同一行。以下是一些解决方法：how-to-remove-the-space-between-inline-block-elements

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>