html - float div 未正确换行

Question

我有一堆 div 设置为 float 。出于某种原因，当它达到 3 行 float div 时，div 开始表现得很滑稽。这是 JS fiddle :http://jsfiddle.net/grem28/nq1q55bz

好像和我设置的名字有关系。这是代码:

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />AccuDrop</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />AccuPen Vet</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Accutome Vet</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Connect Platform Catalog</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Instrument Care and Handling</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Opti-Kleen Diamond Knife Cleaning System</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Portables Brochure</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Surgical Disposable Catalog</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />PachPen Study</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />AccuPen Paper</a>
</div>

<div class="pdfs">
  <a href="#" target="_blank"><img src="#" /><br />Femtosecond Cataract Instruments</a>
</div>

这是CSS:

.pdfs {
  width:22%;
  margin-right:10px;
  margin-bottom:10px;
  float:left;
}

.pdfs:after {
  content:"";
  display:table;
  clear:both;
}

.pdfs img {width:100%;}

Answer 1

不确定你的 :after 规则是干什么用的，但我会用:

.pdfs:nth-child(4n+5) {
    clear:both
}

jsFiddle example