Question

我有一堆div设置为浮动。出于某种原因，当它获得3行浮动div时，div开始表现得很有趣。这是jsfiddle：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

您需要清除每行末尾的float属性。有趣的活动是由于某些行的高度不均匀所致。

每隔三个div后添加<div style="clear:both;"></div>即可解决问题。缺点是无论窗口大小如何，它每行都会强制三个项目。它基本上是一种表示每行结束的方式。

浮动div没有正确包装

2 个答案: