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

基本问题是边距计算...如果您没有完全正确，那么您的浮动就会错位。

您的 parent div 宽度为 860px。

内部divs（每行）占88%（756.8px）。看到已经很乱了。

现在剩下 12% 或 103.2px 在 5 个间隙之间分布（记住 4 divs）但是侧边距不会折叠所以你实际上是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>

浮动 div 布局不正确

Floating divs not laying out properly

css

css-float