浮动 div 未正确换行

Question

我有一堆 div 设置为浮动。出于某种原因，当它达到 3 行浮动 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

Answer 2

您需要清除每行末尾的浮点数属性。搞笑的activity是因为有些行的高度不均匀。

在每三个 div 之后添加 <div style="clear:both;"></div> 将解决问题。缺点是无论 window 大小如何，它都会强制每行三个项目。它基本上是一种表示每一行结尾的方法。

浮动 div 未正确换行

Floating divs not wrapping properly

html

css

css-float