css - float div 布局不正确

Question

我在左边漂浮着一堆 div，但出于某种原因，它们的布局很奇怪。我试着做 4 行，但它很随机。我将得到第 3 行，然后是 4，然后是 1。第 1 行然后是 4。不确定为什么会这样，希望得到帮助。这是我的代码:

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

<div class="pdfs">
  <a href="/assets/site/docs/vet.pdf" target="_blank">
    <img src="/assets/site/img/vet.png" />
    <br />Veterinarian</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/platform-catalog.pdf" target="_blank">
    <img src="/assets/site/img/platform-catalog.png" />
    <br />Contact Platform Catalog</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/brochure.pdf" target="_blank">
    <img src="/assets/site/img/brochure.png" />
    <br />Portanti Brochure</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/study.pdf" target="_blank">
    <img src="/assets/site/img/diagnostic-equipment/img/study.jpg" />
    <br />Pachachu Study</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/paper.pdf" target="_blank">
    <img src="/assets/site/img/diagnostic-equipment/img/paper.jpg" />
    <br />AddiPen Paper</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/presentationubm2015.pdf" target="_blank">
    <img src="/assets/site/img/zqmppt.jpg" />
    <br />ZQM in Dinners of Exterior Segment Pathing</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/pen.pdf" target="_blank">
    <img src="/assets/site/img/flyer.jpg" />
    <br />Pentt Product Flyer</a>
</div>

<div class="pdfs">
  <a href="/assets/site/docs/equipment.pdf" target="_blank">
    <img src="/assets/site/img/eguipment.jpg" />
    <br />Direction Equipment</a>
</div>

Answer 1

基本问题是边距计算......如果你没有完全正确地计算它，那么你的 float 就会错位。

你的父 div 是 860px 宽。

内部 div(每行)占 88% (756.8px)。看到它已经很乱了。

现在剩下 12% 或 103.2px 在 5 个间隙之间分布(记住 4 个 div)但是侧边距不会折叠所以你实际上除以 8(1 + 2 + 2 + 1) 所以每个边距应该是 103.2px/8 = 12.9px。

但是，这不允许浏览器处理舍入(而且它们的处理方式各不相同，因此为了安全起见，我们会说 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>