如何修复while循环中生成的多重div中的间隙？

Question

`echo '<div class="col-sm-4">';
 echo '<div class="product-image-wrapper">';                
 echo'<div class="single-products">';
 echo'<div class="productinfo text-center">';
 echo'<a href="product-detail.php      id='.$row[9].'&item='.$_REQUEST['item'].'&product='.$row[2].'&pro=2">';
 echo '<img  src="image/thumb_images/'.$row['6'].'" />';  // image
 $thumb='image/thumb_images/'.$row[6];
 echo '<h6>Rs. ' .ROUND($row['SellingPrice']).'/-';
 if($row['discount']>0){;
 echo ' &nbsp;&nbsp;<span>MRP. ' .$row[4].' /-</span>';
 }else{}
 echo '</h6>';
 echo'<h6>'.$row[2].'</h6>';
 $name=$row[2];`
 echo' </div>';
 echo '</div>';
 echo '</div>';
 echo '</div>';

CSS

.single-products {
 position: relative;
 }
.new, .sale {
 position: absolute;
 top: 0;
 right: 0;
 }

.productinfo h6{
 color:#fff;
}
.productinfo h5{
 font-size: 70%;
 text-decoration: line-through;
 font-weight:bold;
 color:#999;
 }
.product-overlay h2{
 margin-top:250px;
 color: red;
 }
.single-products h6{
 color:#fff;
 font-size: 90%;
vertical-align: top;
text-decoration: none;
line-height: 1;
}
.single-products span{
 font-size:12px;
 text-decoration: line-through;
 font-weight:300;
 color:#Fff;
 }
.productinfo p{
 font-family: 'Roboto', sans-serif;
 font-size: 14px;
 font-weight: 400;
 color: #696763;
 }

这里我已经写了我的引导代码，下面我已经附加了我的屏幕截图，当我固定大小然后它工作正常，但我想通过图像填补这个差距...我有附加CSS也请读出上面的代码和给我一个与问题有关的答案.. 请建议我

Answer 1

参考Akhil尝试以下解决方案Kuldeep。希望它有效。

<?php
    while($row = mysql_fetch_array($result)){
        $product_count++ ;
        echo '<div class="col-sm-4" style="text-overflow:ellipsis;">';

        //put your code here
        //put your code here
        //put your code here

        echo'</div>';
        if($product_count % 3 == 0){
            echo'<div style="clear: both;"></div>'; 
        }
   }
?>

Answer 2

kuldeep，要么修复框的高度，要么有更多文本，你可以使用text-overflow: ellipsis;显示更多文字。另外一个选项是你需要在每3个框之后添加一个clear:both标记。你可以在条件循环中做到这一点。