在 html 缩略图动态图库中的何处使用清除修复

Question

我有一个动态图库，它在其中循环播放。但我的画廊大拇指搞砸了。我使用了 clearfix 并且它起作用了，但是我按了 ctrl z 并且它没有起作用 ctrl y。所以我通过明确的修复失去了我的错误。所以现在我的行没有并排，我的意思是...... 我的拇指不是从左到右开始的。它从左边开始，在页面的底部连续向下结束。这是它的照片。

这是我的代码：

  <div class="container">
    <?php
    $sql = "SELECT * FROM gallery ORDER BY id DESC LIMIT $start_from, $per_page";
    $run = mysqli_query($conn,$sql);
    while ($rows = mysqli_fetch_assoc($run))
 {
    echo'
    <div class="row">

 <div class="col-md-3 col-sm-2  "> 
<div class="thumbnail  " id="real-estates-columns">
 <div class="text-center">'.($rows['image'] == '' ? 'No Image' : '<img src="../'.$rows['image'].'" width="100%" >').'</div>

<span class="label label-danger info pull-right">
<span data-toggle="tooltip" title="viewed"><b class="glyphicon glyphicon-filter"></b></span>
<span data-toggle="tooltip" title="category">'.ucfirst($rows['category']).' </span>
</span>

 <div class="title-realestates-columns caption">
<h3><a><strong>'.$rows['title'].'</strong></a></h3>
    <!--p>'.substr($rows['description'],0,30).'...</p--->

 <div class="row">

<button type="button"  class="btn btn-danger btn-block" data-toggle="modal" data-target="#info'.$rows['id'].'" ><span class="glyphicon glyphicon-info-sign"></span>  Info</button>
</div>

</div>
</div>
</br>
</div>  
</div>       
    ';
   }
  ?>
 </div>

如果我从循环中取出 div class="row" 并关闭 div class 行也是，画廊是这样的...

我该如何解决这个问题？事情是 clearfix 但是是。

Answer 1

您需要在每第 4 列后添加 clearfix

<?php 
if ($i%4 == 0){ ?>
    <div class="clearfix"></div>
<?php } ?>

完整代码：

<div class="container">
<?php
$sql = "SELECT * FROM gallery ORDER BY id DESC LIMIT $start_from, $per_page";
$run = mysqli_query($conn,$sql);
$i = 1;
while ($rows = mysqli_fetch_assoc($run))
{
    echo'
    <div class="row">
        <div class="col-md-3 col-sm-2  "> 
            <div class="thumbnail  " id="real-estates-columns">
                <div class="text-center">'.($rows['image'] == '' ? 'No Image' : '<img src="../'.$rows['image'].'" width="100%" >').'</div>

                <span class="label label-danger info pull-right">
                    <span data-toggle="tooltip" title="viewed"><b class="glyphicon glyphicon-filter"></b></span>
                    <span data-toggle="tooltip" title="category">'.ucfirst($rows['category']).' </span>
                </span>

                <div class="title-realestates-columns caption">
                    <h3><a><strong>'.$rows['title'].'</strong></a></h3>
                    <!--p>'.substr($rows['description'],0,30).'...</p--->

                    <div class="row">
                         <button type="button"  class="btn btn-danger btn-block" data-toggle="modal" data-target="#info'.$rows['id'].'" ><span class="glyphicon glyphicon-info-sign"></span>  Info</button>
                    </div>
                </div>
            </div>
            </br>
        </div>';  
        if ($i%4 == 0){ ?>
            <div class="clearfix"></div>
        <?php }
        echo'
    </div>       
    ';
    $i++;
}?>
</div>

Answer 2

我为我的行找到了解决方案

我发现在这个linkhttp://www.bluthemes.com/blog/3/clearing-bootstrap-3-columns

这是修复所有问题的css。

/*  Bootstrap Clearfix */

/*  Tablet  */
@media (min-width:767px){

/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-md-1:nth-child(12n+1),
.col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: none;
}
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: left;
}
}


 /*  Medium Desktop  */
 @media (min-width:992px){

/* Column clear fix */
.col-lg-1:nth-child(12n+1),
.col-lg-2:nth-child(6n+1),
.col-lg-3:nth-child(4n+1),
.col-lg-4:nth-child(3n+1),
.col-lg-6:nth-child(2n+1),
.col-sm-1:nth-child(12n+1),
.col-sm-2:nth-child(6n+1),
.col-sm-3:nth-child(4n+1),
.col-sm-4:nth-child(3n+1),
.col-sm-6:nth-child(2n+1){
clear: none;
 }
 .col-md-1:nth-child(12n+1),
 .col-md-2:nth-child(6n+1),
.col-md-3:nth-child(4n+1),
.col-md-4:nth-child(3n+1),
.col-md-6:nth-child(2n+1){
clear: left;
 }
 }


 /*  Large Desktop  */
 @media (min-width:1200px){

 /* Column clear fix */
 .col-md-1:nth-child(12n+1),
 .col-md-2:nth-child(6n+1),
 .col-md-3:nth-child(4n+1),
 .col-md-4:nth-child(3n+1),
 .col-md-6:nth-child(2n+1),
 .col-sm-1:nth-child(12n+1),
 .col-sm-2:nth-child(6n+1),
 .col-sm-3:nth-child(4n+1),
 .col-sm-4:nth-child(3n+1),
 .col-sm-6:nth-child(2n+1){
  clear: none;
  }
 .col-lg-1:nth-child(12n+1),
 .col-lg-2:nth-child(6n+1),
 .col-lg-3:nth-child(4n+1),
 .col-lg-4:nth-child(3n+1),
 .col-lg-6:nth-child(2n+1){
 clear: left;
 }
 }

在 html 缩略图动态图库中的何处使用清除修复

Where to use clear fix in html inside of a thumbnail dynamic gallery

html

php

clearfix