布局和浮动div问题

Question

所以，我的布局看起来像这样

如您所见，div完美地浮动/对齐到右侧，但是在左侧之间有一个间隙，如何清除该间隙？

DIV CSS：

.thread-list{
   width: 40%;
   background-color: #fff;
   padding: 10px;
   border-style:solid;
   border-width:1px;
   border-color:#F0F0F0;
   margin-bottom: 3px;
   margin-right: 10px;
   margin-bottom: 10px;
   overflow: auto;
   float: left;
}

注意：div正在动态显示内容（来自数据库），并且无法在2个单独的列中创建div。

抱歉，如果我不太清楚。

Answer 1

DEMO

如果浮动多个元素，并且其中一个div的高度大于其他元素，则将创建这些类型的效果（您在屏幕快照中显示的一种）。

解决方案1：在您的情况下，使用..2n.. :nth-child(2n+1)清除每行第一个元素的左浮点数，即..2n..因为您在一行中有2个元素。

在样式表中添加以下CSS：

.thread-list:nth-child(2n+1){
    clear:left;
}

解决方案2：解决方案1将对齐所有div，但下面仍会存在一个负空格，如果您不希望这样做，则必须使用Masonry Layout之类的插件，而使用纯css无法实现此效果。