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

【问题标题】：How do I fix the gap in the multiple div which is generated in while loop?如何修复while循环中生成的多个div中的间隙？
【发布时间】：2015-02-19 07:43:40
【问题描述】：

`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，请阅读上面的代码并给我有关问题的答案.. 请给我建议

【问题讨论】：

请提供相关的HTML、CSS代码
我猜你有 4 列 col-sm-4 在一行中，因此存在差距。
最好在问题中添加while循环生成的HTML。
但是你应该关闭它的容器内的A标签吗？据我所知，您在关闭 A 标签之前要关闭多个容器（A 标签所在的位置）？
@KuldeePChoudharY 好的，您需要让所有列的高度相等，以减少差距。解决方案是让所有图像的高度相等，你所拥有的是很少有 247 像素的高度，很少有 248 像素。

标签： php html css twitter-bootstrap

【解决方案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>'; 
        }
   }
?>

【讨论】：

【解决方案2】：

kuldeep，要么修正盒子的高度，如果有更多的文字，你可以使用text-overflow: ellipsis; 来显示更多的文字。另一种选择是您需要在每 3 个框后放置一个 clear:both 标签。我认为你可以在条件循环中进行。

【讨论】：