Question

我希望以下代码能够在集合中获取拼图的缩略图，但缩略图的大小不同，如何更改我的代码以便正确显示：

    <div class="row"><?php
while ( $row = $result->fetch_assoc() ) {?>
  <div class = "col-sm-6 col-md-3">
  <div class = "thumbnail">
  <img src = "getimage2.php?id=<?php echo $row['id']; ?>" alt = "<?php echo ucfirst($row['jigsaw_title']); ?>">
  </div>
 <div class = "caption text-center">
 <h3><?php echo ucfirst($row['jigsaw_title']); ?></h3>
 <p>
 <?php echo $row['jigsaw_size_wmm']."mm x ".$row['jigsaw_size_hmm']."mm / ".mmToIn($row['jigsaw_size_wmm'])."in x ".mmToIn($row['jigsaw_size_hmm'])."in\n"; ?>    
 <p>
<a href='#myModal1' class='btn btn-primary btn-sm' id='custId' data-toggle='modal' data-id='".$row['id']."' ><i class='glyphicon glyphicon-eye-open'></i></a>
    <a href='#myModal2' class='btn btn-warning btn-sm' id='editrecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-pencil'></i></a>
    <a href='#myModal3' class='btn btn-danger btn-sm' id='deleterecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-remove'></i></a>
        </p>
     </div>
   </div>
<?php   
}
?>  
</div>

Answer 1

根据您在评论中的答案，这就是我的工作。不幸的是，CSS浮动有许多缺点，其中之一就是你看到的祈祷凉亭的奇怪设置。

我的修补程序改变了一些使用Flexbox的东西，这对于这种基本上同样高度但不完全一样的场景来说更加可靠。

如果有什么东西不适合你，请告诉我，这里有一个基本HTML + CSS的片段

＆＃13;

.flex-container .row {
  display: flex;
  flex-wrap: wrap;
}
.flex-container .row .col-sm-6,
.flex-container .row .col-md-3 {
  flex-direction: column;
  display: flex;
  justify-content: space-between;
}
.flex-container .row .col-sm-6 .text-center,
.flex-container .row .col-md-3 .text-center {
  margin-bottom: 10px;
}

＆＃13;

<link href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css" rel="stylesheet"/>
<section class="container flex-container">
  <div class="row">
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x500" alt="" class="responsive"></div>
      <div class="text-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti doloribus eius beatae nihil, reiciendis ex placeat facere dolores, commodi eveniet tempore ratione, et, ducimus error cum. Architecto et, facilis assumenda.</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x300" alt="" class="responsive"></div>
      <div class="text-center">Aliquam rem culpa, facere labore dolore autem pariatur quos, animi voluptatibus aut voluptas itaque obcaecati voluptatum quod eveniet consectetur libero adipisci laudantium consequuntur, delectus corporis! Tempora dignissimos eligendi, excepturi non.</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x500" alt="" class="responsive"></div>
      <div class="text-center">Et eum, aliquid aliquam molestiae ducimus ipsa nam minus similique magni, ullam est, reprehenderit sunt impedit error distinctio minima nulla quod consequuntur. Earum beatae sunt cumque, doloribus quasi numquam quos!</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x500" alt="" class="responsive"></div>
      <div class="text-center">Quae commodi asperiores perspiciatis, assumenda maxime necessitatibus qui. Incidunt, expedita voluptas nihil dolor ab nam, officia fugit quae voluptatum nulla sapiente alias asperiores atque voluptates consectetur cumque facilis minus beatae.</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x500" alt="" class="responsive"></div>
      <div class="text-center">In atque ab odio est quia fugit quam blanditiis perspiciatis doloribus minus? Nulla expedita sequi quam vitae quaerat eveniet cum at, deserunt molestias explicabo. Cupiditate unde eligendi reprehenderit, accusamus numquam.</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x500" alt="" class="responsive"></div>
      <div class="text-center">Veritatis quasi dolorem sunt itaque, sit officia blanditiis architecto possimus. Vitae repudiandae aperiam nostrum pariatur, odit eligendi, vero. Alias id adipisci culpa, vitae hic porro provident doloribus qui quisquam possimus.</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x500" alt="" class="responsive"></div>
      <div class="text-center">Voluptate maxime quasi sequi nobis repudiandae optio nesciunt sapiente, ipsa eaque itaque numquam velit iusto atque, hic officiis id quidem minima consectetur illo repellat iure molestiae ipsam minus. Quae, ipsum!</div>
    </div>
    <div class="col-sm-6 col-md-3">
      <div class="thumbnail"><img src="https://placehold.it/500x500" alt="" class="responsive"></div>
      <div class="text-center">Impedit ipsa nemo libero in maiores, aperiam earum assumenda minus animi, ut necessitatibus, a ea. Illo et, dolorum velit repellat optio nam, iusto, ea nesciunt nostrum sunt ipsam odit nisi.</div>
    </div>
  </div>
</section>

＆＃13;

对于您的PHP代码，我认为这应该生成与我正在使用的相同的HTML

<div class="container flex-container">
    <div class="row">
        <?php
while ( $row = $result->fetch_assoc() ) { ?>
        <div class="col-sm-6 col-md-3">
            <div class="thumbnail">
                <img src = "getimage2.php?id=
<?php echo $row['id']; ?>" alt = "
<?php echo ucfirst($row['jigsaw_title']); ?>">
            </div>
            <div class="caption text-center">
                <h3>
                    <?php echo ucfirst($row['jigsaw_title']); ?></h3>
                <p>
                    <?php echo $row['jigsaw_size_wmm']."mm x ".$row['jigsaw_size_hmm']."mm / ".mmToIn($row['jigsaw_size_wmm'])."in x ".mmToIn($row['jigsaw_size_hmm'])."in\n"; ?>    
                    <p>
                        <a href='#myModal1' class='btn btn-primary btn-sm' id='custId' data-toggle='modal' data-id='".$row['id']."' ><i class='glyphicon glyphicon-eye-open'>
                            </i></a>
                        <a href='#myModal2' class='btn btn-warning btn-sm' id='editrecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-pencil'>
                            </i></a>
                        <a href='#myModal3' class='btn btn-danger btn-sm' id='deleterecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-remove'>
                            </i></a>
                </p>
            </div>
        </div>
        <?php   
                                        }
        ?>  
    </div>
</div>

如果您有任何问题，或者由于某种原因这项工作无效，请与我们联系。

Answer 2

由于每行只显示四个图像，请尝试以下代码：

<?php $cnt = 0; ?>
<div class="row"><?php
    while ( $row = $result->fetch_assoc() ) {?>
        <?php $cnt += 1; ?>
        <div class = "col-sm-6 col-md-3">
            <div class = "thumbnail">
                <img src = "getimage2.php?id=<?php echo $row['id']; ?>" alt = "<?php echo ucfirst($row['jigsaw_title']); ?>">
            </div>
            <div class = "caption text-center">
                <h3><?php echo ucfirst($row['jigsaw_title']); ?></h3>
                <p>
                    <?php echo $row['jigsaw_size_wmm']."mm x ".$row['jigsaw_size_hmm']."mm / ".mmToIn($row['jigsaw_size_wmm'])."in x ".mmToIn($row['jigsaw_size_hmm'])."in\n"; ?> 
                </p>
                <p>
                    <a href='#myModal1' class='btn btn-primary btn-sm' id='custId' data-toggle='modal' data-id='".$row['id']."' ><i class='glyphicon glyphicon-eye-open'></i></a>
                    <a href='#myModal2' class='btn btn-warning btn-sm' id='editrecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-pencil'></i></a>
                    <a href='#myModal3' class='btn btn-danger btn-sm' id='deleterecord' data-toggle='modal' data-id='".$row['id']."'><i class='glyphicon glyphicon-remove'></i></a>
                </p>
             </div>
       </div>
       <?php
            if($cnt == 4){
                echo "</div>";
                echo "<div class = 'row'>";
                $cnt = 0;
            }
       ?>
    <?php } ?>  
</div>

解决方案是，如果您已经显示了四张图片，请为下一张图片创建另一张 row 。

Bootstrap缩略图未正确对齐

2 个答案: