漂浮的div没有正确布局

Question

我离开了一堆div，但由于某种原因，他们正在布置所有奇怪的东西。我尝试做4行，但它很随机。我将获得3行，然后是4行，然后是1行，然后是1行。不知道为什么会发生这种情况，并希望得到帮助。这是我的代码：

＆＃13;

＆＃13;

 5        Bob          13523        1056

＆＃13;

.pdfs {
  width: 22%;
  margin-right: 10px;
  margin-bottom: 10px;
  float: left;
}
.pdfs:nth-child(4n+5) {
  clear: both
}
.pdfs img {
  width: 100%;
}

＆＃13;

＆＃13;

＆＃13;

Answer 1

基本问题是保证金计算...如果你没有完全，那么你的花车就会错位。

您的父div为860px宽。

内部div（每行）占88％（756.8px）。看它已经很乱了。

现在留下12％或103.2px在5个间隙之间传播（记住4个div）但是侧边距不会崩溃所以你实际上除以8（1 + 2 + 2 + 1）因此每个边距应为103.2px / 8 = 12.9px。

但是，这不允许broswers处理舍入（他们都采用不同的方式，所以我们会说安全性为12.75px。

凌乱不是它......但是有一种更简单的方法......设置边距为％。

然后只有12％/ 8 = 1.5％...让浏览器自己动手。

您选择哪种方式取决于您。

百分比演示

* {
  box-sizing: border-box;
}

.wrap {
  width: 860px;
  margin: auto;
  border:1px solid grey;
  overflow: hidden;
}

.box {
  width: 22%;
  height: 50px;
  background: red;
  float: left;
  /* margin calculation */
  /* div widths total 756.8px*/
  /* room available = 103.2px*/
  /* number of gaps = 8 */
   margin:10px 1.5%;
}

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

像素演示

* {
  box-sizing: border-box;
}

.wrap {
  width: 860px;
  margin: auto;
  border:1px solid grey;
  overflow: hidden;
}

.box {
  width: 22%;
  height: 50px;
  background: red;
  float: left;
  /* margin calculation */
  /* div widths total 756.8px*/
  /* room available = 103.2px*/
  /* number of gaps = 8 */
   margin:10px 12.75px;
}

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