bootstrap缩略图对齐问题

时间:2024-03-22 11:41:38

碰到了一个缩略图对齐问题,

图片大小不一致时,手动调整了图片比例。

文字部分也通过在caption下面的h,p标签设置高解决了比例

最后还是缩略图盒子大小几乎都一样高了,可还是出现了不能对齐的问题。不知道原因。

 

原因还是高度不一致问题,图片手动等比例调整大小时1px的误差就会造成高度不一致,就对不齐。所以必须调整图片同样大小才行。

bootstrap缩略图对齐问题

 


<!-- 调用12次          
            <div class="col-sm-6 col-md-4 newSize">
                   <a href="{url}" class="newSize">
                    <div class="thumbnail">             
                        {imgeUrl}
                    
                        <div class="caption">
                            <h4 style='height: 50px;'>{title}</h4>
                            <p style='height: 60px;'>{jianjie}</p>
                            <p>
                              <small>{author}</small>  <small style='margin-left:10px;'>{date}</small> <small style='margin-left:10px;'>{weight}</small>
                            </p>
                        </div>
                    </div>
                </a>
            </div> -->


我觉得是a标签的问题,另一个缩略图就没这么严格的对齐问题,区别就是在最外层没有a标签,

           <div class="col-sm-6 col-md-4">
            <div class="thumbnail">
              <?=$row['imgH'] ?> 
              <div class="caption">
                <h3><?=$row['title'] ?></h3>    
                <p><span class="marginRight10">日期:<?=$row['date'] ?></span><span class="marginRight10"> 作者:<?=$row['author'] ?></span><span class="marginRight10">分类:<?=$row['type'] ?></span></p>
                <p>简介:<?=$row['jianjie'] ?></p>
                <p><a href="updata.php?id=<?=$row['id'] ?>" class="btn btn-primary" role="button">修改</a> <a  href="deleteSever1.php?id=<?=$row['id'] ?>" class="btn btn-danger" role="button">删除</a></p>
              </div>
            </div>
          </div>